Question

注意：我看过几个问题，比如我的标题，但它们并没有解决我的问题。像：

Angular2 Parent Component with multiple instances of child component（只是代码错误）
Instance Angular 2 Component Two times（这是关于自举，而不仅仅是组件）

场合
我在角度应用程序中有几个模板驱动的表单，有多个日期字段。我创建了一个特殊组件（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 { }

出问题
日期变量是共享的，因为使用了相同的实例，这是我不想要的。此外，如果验证触发其中一个组件，它会认为其他组件无效（它们不是）。

Answer 1

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

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

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

1 个答案: