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

注意：我已经看到了几个问题，例如我的标题，但是它们不能解决我的问题。喜欢：

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

情况
我的应用程序中有多个模板驱动的表单，其中包含多个日期字段。我制作了一个特殊组件（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.
  // https://stackoverflow.com/questions/39242219/angular2-nested-template-driven-form
  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>

AppModule：

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

出错
的地方由于使用了相同的实例，所以共享了date变量，我不希望这样做。同样，如果验证触发了其中一个组件，它将认为其他组件无效（不是）。