如何使角度组件可重用？ （角度 2+）

Question

我为带有端口的 IP 地址创建了一个输入框。这个输入框由一个 div 中的 5 个输入框组成。这是一个基本示例。

<div class="form-inline" style="display: inline-block">
  <input required name="block1" class="form-control" #block1="ngModel" type="text" [(ngModel)]="ipBlock1">.
  <input required name="block2" class="form-control" #block2="ngModel" type="text" [(ngModel)]="ipBlock2">.
  <input required name="block3" class="form-control" #block3="ngModel" type="text" [(ngModel)]="ipBlock3">.
  <input required name="block4" class="form-control" #block4="ngModel" type="text" [(ngModel)]="ipBlock4">:
  <input required name="block5" class="form-control" #block5="ngModel" type="text" [(ngModel)]="ipBlock5">
</div>

在 ip-address-input.component.ts 文件中我有：

@Input() ipProtocol
@Output() ipAddressCreated: EventEmitter<any> = new EventEmitter<{ipAddress: string}>();
ipBlock1: string;
ipBlock2: string;
//some logic like string concatenation (ipBlock1 + '.' + ipBlock2 + '.' + ...)

在 app.component.html 中：

<ip-address-input [ipProtocol]="dhcpRangeStart"></ip-address-input>
<ip-address-input [ipProtocol]="dhcpRangeStop"></ip-address-input>

但是，例如，当我检查第一个 IP 时，它会返回最后输入的 IP。我如何使这个组件可重用（创建多个实例）

带有实际IP输入框的图片：

Answer 1

通过利用角度形式的ControlValueAccessor 和NG_VALUE_ACCESSOR，我构建了一些类似于您的控件。基本上，这些为您提供了一种模式来构建您自己的自定义和可重用的表单控件。

以下是示例代码，但您也可以关注this tutorial 来构建您的组件。

组件：

import { Component, OnInit, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl } from '@angular/forms';

const IP_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => IpInputComponent),
    multi: true
};

@Component({
  selector: 'ip-address-input',
  providers: [IP_VALUE_ACCESSOR],
  templateUrl: './ip-input.component.html',
  styleUrls: ['./ip-input.component.css']
})
export class IpInputComponent implements OnInit, ControlValueAccessor {

ipBlock1: string;
ipBlock2: string;
ipBlock3: string;
ipBlock4: string;
ipBlock5: string;

    disabled: boolean;
    onChange: Function; 
    onTouched: Function; 

    get value(): string {
        return ipBlock1 + '.' + ipBlock2 + '.' + ipBlock3 + '.' + ipBlock4 + ':' + ipBlock5;
    }

    constructor() {
        this.onChange = (_: any) => {};
        this.onTouched = () => {};
        this.disabled = false;
    }

    ngOnInit() {
    }

    writeValue(obj: any): void {
        if(obj) {
            let arr = obj.split('.');

            this.ipBlock1 = arr[0];
            this.ipBlock2 = arr[1];
            this.ipBlock3 = arr[2];
            this.ipBlock4 = arr[3].split(':')[0];
            this.ipBlock5 = arr[3].split(':')[1];
        }
    }

    registerOnChange(fn: any): void {
        this.onChange = fn;
    }
    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }
    setDisabledState?(isDisabled: boolean): void {
        this.disabled = isDisabled;
    }
}

模板：

<div class="form-inline" style="display: inline-block">
  <input required class="form-control" type="number" [ngModel]="ipBlock1" />. 
  <input required class="form-control" type="number" [ngModel]="ipBlock2" />.
  <input required class="form-control" type="number" [ngModel]="ipBlock3" />.
  <input required class="form-control" type="number" [ngModel]="ipBlock4" />:
  <input required class="form-control" type="number" [ngModel]="ipBlock5" />
</div>

用法：

<ip-address-input formControlName="ipAddress" (value)="ipAddress.value"></ip-address-input>

HTH