這篇文章將為大家詳細講解有關ng-alain的sf實現自定義部件的流程方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
一、背景
最近使用ng-alain做前端，sf的部件很豐富，但是做起來之后就會發現，多多少少會有一些不符合需求的東西，比如：
這是一個string的部件，后邊跟上一個單位看著很不錯，但是我們通常在使用number時會更需要這個單位，然而官方的部件并沒有
再比如：
我想做一個編輯框，要求內容不可編輯，并且該內容要從別的列表進行選擇，下拉選擇可以滿足需求，但是如果內容太多，有時就不方便使用下拉框了，那么這時候我們就需要自定義
二、自定義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實現自定義部件的流程方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
