Angular 2 或 4：如何添加子组件的多个实例

Question

注意：我看到了几个像我的标题这样的问题，但它们并没有解决我的问题。喜欢：

• 具有多个子组件实例的Angular2父组件（只是代码错误）
• 实例 Angular 2 组件两次（这是关于引导，而不仅仅是组件）

情况
我的 angular 应用程序中有几个模板驱动的表单，带有多个日期字段。我制作了一个特殊的组件 (DatePickerComponent)，我将它作为子组件插入到所有这些表单中。

问题
组件内部的变量是共享的。Angular 可能会实例化同一个对象，但我想要不同的实例！我很清楚如何做到这一点。

我认为是解决方案
它可能与您声明 DatepickerComponent 的位置有关。我在 app.module.ts 中声明了它，但这会为整个应用程序创建一个实例。我不知道如何确保我的父组件被迫使用两个不同的子组件。

推理
我在一个单独的组件中执行此操作，因为我还没有日期选择器。现在它是一个带有模式表单验证的文本框。稍后我会做出更好的东西（一个真正的日期选择器），我不想到处复制粘贴代码并犯错误。使用 1 个组件，这很容易做到。

具体代码

import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {ControlContainer, NgForm} from "@angular/forms";

@Component({
  selector: 'app-datepicker-component',
  templateUrl: './datepicker.component.html',
  // Add viewProviders, so the input will be treated part of the form in the parent.
  // /sf/ask/2746955361/
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class DatepickerComponent implements OnInit { // stuff }

HTML文件：

<div class="form-group">
  <label for="date" class="col-sm-4 control-label">{{ label }}</label>
  <div class="col-sm-8">
    <input type="text" name="date" id="date" class="form-control" [ngModel]="date" (ngModelChange)="dateChange.emit($event)"
           #inputdate="ngModel" [required]="required" pattern="^(?:(?:31(\/|-|\.)(?:0[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)02\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)\d{2})$"/>
    <span class="help-block" *ngIf="required && inputdate.invalid && inputdate.errors.required && (inputdate.dirty || inputdate.touched || triedSubmit)">Datum is verplicht.</span>
    <span class="help-block" *ngIf="inputdate.invalid && inputdate.errors.pattern && (inputdate.dirty || inputdate.touched || triedSubmit)" >Datum moet formaat dd-MM-yyyy hebben.</span>
  </div>
</div>

在其他一些页面中，我使用：

<form>
  <app-datepicker-component label="Actief vanaf" [(date)]="date1" [required]="true" [triedSubmit]="triedSubmit"></app-datepicker-component>

  <app-datepicker-component label="Actief tot" [(date)]="date2" [required]="false" [triedSubmit]="triedSubmit"></app-datepicker-component>
</form>

应用模块：

@NgModule({
  declarations: [
    AppComponent,
    // stuff
    DatepickerComponent
  ],
  imports: [
    // stuff
  ],
  providers: [
    // stuff],
  bootstrap: [AppComponent]
})
export class AppModule { }

出错
的事情date 变量是共享的，因为使用了相同的实例，这是我不想要的。此外，如果验证针对其中一个组件触发，它会认为其他组件无效（实际上并非如此）。

Answer 1

实际上，它没有使用相同的实例。问题是它们都属于同一个form，并且为 使用相同的值name。这会导致底层的角度形式对象将它们视为相同。

您的选择是将它们放在单独的表单中，或者使用不同的name值，可能通过将名称作为输入传入