g-alain 의 sf 위 젯 프로 세 스 를 어떻게 정의 합 니까?

배경
최근 에 ng-alain 을 사용 하여 전단 을 만 들 었 습 니 다.sf 의 부품 이 매우 풍부 하지만 만 들 면 수요 에 부합 되 지 않 는 것 이 많 고 적 음 을 발견 할 수 있 습 니 다.예 를 들 어:

이것 은 string 의 위 젯 입 니 다.뒤쪽 에 있 는 단 위 를 따라 가 는 것 이 좋 습 니 다.그러나 우 리 는 보통 number 를 사용 할 때 이 단 위 를 더 필요 로 합 니 다.그러나 공식 위 젯 은 그렇지 않 습 니 다.
다시 예 를 들 면:

편집 상 자 를 만 들 고 싶 습 니 다.내용 을 편집 할 수 없 도록 요구 하고 이 내용 은 다른 목록 에서 선택 해 야 합 니 다.드 롭 다운 선택 은 수 요 를 만족 시 킬 수 있 습 니 다.그러나 내용 이 너무 많 으 면 드 롭 다운 상 자 를 사용 하기 가 불편 할 때 가 있 습 니 다.이 럴 때 우 리 는 사용자 정의 가 필요 합 니 다.
2.사용자 정의 ng-alain 위 젯 의 절차
1.구성 요소 의 전체 구조

2.우선,구성 요소click-input.component.html,사용자 정의 구성 요 소 는sf-item-wrap특수 태그 에 포함 되 어야 합 니 다.

<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
 <!--           -->
 <div nz-row>
  <div nz-col nzSpan="16"><input type="text" [placeholder]="placeholder" nz-input [(ngModel)]="content" [disabled]="inputDisable" (ngModelChange)="onChange()"></div>
  <div nz-col nzSpan="2" nzPush="2"></div>
  <div nz-col nzSpan="6"><button nz-button type="button" nzType="primary" (click)="test()" >{{btnTitle}}</button></div>
 </div>
 <!--           -->
</sf-item-wrap>

3.구성 요소 쓰기click-input.component,계승 ControlWidget

import {Component, OnInit} from '@angular/core';
import { ControlWidget } from '@delon/form';

@Component({
 selector: 'app-product-widget-click-input',
 templateUrl: './click-input.component.html',
})
export class ClickInputComponent extends ControlWidget implements OnInit {

 /*         KEY   */
 static readonly KEY = 'click-input';

 //     
 content: any;
 // to: any;

 placeholder: string;  //           ui: {placeholder: '       ' } 
 inputDisable: boolean; //           ui: {inputDisable: true,  // input    }
 btnTitle: string; //           ui: {btnTitle: '    ',}      

 ngOnInit(): void {
  this.placeholder = this.ui.placeholder || '   '; //           ui: {placeholder: '       ' } 
  this.inputDisable = this.ui.inputDisable || false; //           ui: {inputDisable: true,  // input    }
  this.btnTitle = this.ui.btnTitle || '  '; //           ui: {btnTitle: '    ',}
 }

 getData = () => {
  return this.content;
 }

 onChange() {
  const v = this.getData();
  this.setValue(v);
 }

 // reset                        
 reset(value: any) {
  if (value) {
   console.log(value);
   const content = value;
   this.content = content;
   // this.to = to;
   this.setValue(value);
  }

 }

 test(value?: string){
  if (this.ui.click) {
   this.ui.click(value);  //             ui         ui: {click: (value) => this.test(value),}
  }
 }

}

4.shared.module.ts에 위 젯 등록
프로젝트 내용 과 관련 하여 아래 는 등록 부품 의 거주 내용 만 보 여 줍 니 다.

//        
const WIDGETS = [
 RangeInputComponent,
 ClickInputComponent
];

@NgModule({
 declarations: [
  // your components
  ...COMPONENTS,
  ...DIRECTIVES,
  ...WIDGETS
 ],
})

export class SharedModule {
 constructor(widgetRegistry: WidgetRegistry) {
  //         widget
  for (const widget of WIDGETS){
   widgetRegistry.register(widget.KEY /* 'range-input' */, widget);
  }
 }
}

5.사용자 정의 위 젯 사용

channel-select.component.html

<sf [schema]="schema" (formSubmit)="submit($event)">
</sf>

channel-select.component.ts

schema: SFSchema = {
  properties: {
   btn: { type: 'string', title: '   +  ',
    default: '1234', //     
    ui: {
     widget: 'click-input',
     placeholder: '       ',
     // inputDisable: true,  // input    
     btnTitle: '    ',
     click: (value) => this.test(value),
    }
   },
  }
 };

총결산
여기 서 ng-alain 의 sf 가 위 젯 을 어떻게 사용자 정의 하 는 지 에 관 한 글 을 소개 합 니 다.더 많은 ng-alain 의 sf 가 위 젯 내용 을 어떻게 사용자 정의 하 는 지 에 관 한 글 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!