Angular2組件連接多個輸入組件

Question

請考慮以下情形。 我想使用三個NameInputComponent ，每個包裹一個文本輸入，以構造FullNamesComponent ：

• 兩個NameInputComponent ，用於一對單獨的名字（ firstName1和firstName2 ）
• 一個NameInputComponent ，用於共享的姓氏（ sharedLastName ）

FullNamesComponent應該公開兩個全名：

• fullName1 = firstName1 + ' ' + sharedLastName
• fullName2 = firstName2 + ' ' + sharedLastName

將這些組件鏈接在一起的正確方法是什么？ 我嘗試使用ngModel ，它使我可以將輸入的值綁定到NameInputComponent的變量，但是我對如何繼續建立感到NameInputComponent ，因此可以在父組件中對這些值進行操作。 據我了解，我需要使用EventEmitter來使父級消耗該值，但是我不確定該如何處理。

我應該注意，這並沒有用作提交表單。 我希望綁定到輸出並將其用於頁面的其他部分，以及能夠以編程方式/通過綁定到頁面的其他部分來更改輸入的內容。

這是我到目前為止的內容：

名稱輸入.component.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'name-input',
  template: `
    <h2>{{inputValue}}</h2>
    <input type="text" [(ngModel)]="inputValue">
  `
})
export class NameInputComponent {
  inputValue: string; // <= How do I detect changes to this?
}

全名.component.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'full-names',
  template: `
    {{fullName1}} & {{fullName2}}
    <name-input #firstName1></name-input>
    <name-input #firstName2></name-input>
    <name-input #sharedLastName></name-input>
  `,
  directives: [
    NameInputComponent
  ],
  providers: [
    NameInputComponent
  ]
})
export class FullNamesComponent {
  fullName1: string; // No idea how to link these
  fullName2: string; // to values in components above
}

Answer 1

我會考慮這樣的事情。

假設您想讓FullNamesComponent監聽NameInputComponent上的事件（更改）

import {Component, EventEmitter} from 'angular2/core';

@Component({
  selector: 'name-input',
  template: `
    <h2>{{inputValue}}</h2>
    <input type="text" [(ngModel)]="inputValue" ()="nameChanged.emit($event.target.value)">
  `,
  outputs: ['nameChanged']
})
export class NameInputComponent {
  inputValue: string; // <= How do I detect changes to this?
  nameChanged = new EventEmitter<string>();
}

那么FullNamesComponent將類似於

import {Component} from 'angular2/core';

@Component({
  selector: 'full-names',
  template: `
    {{fullName1}} & {{fullName2}}
    <name-input #firstName1 (nameChanged)="firstName1Changed($event)"></name-input>
    <name-input #firstName2 (nameChanged)="firstName2Changed($event)"></name-input>
    <name-input #sharedLastName (nameChanged)="sharedLastNameChanged($event)"></name-input>
  `,
  directives: [
    NameInputComponent
  ],
  providers: [
    NameInputComponent
  ]
})
export class FullNamesComponent {
  firstName1: string; 
  firstName2: string; 
  sharedLastName: string;

  firstName1Changed(inName: string) {
     this.fullName1 = inName;
     // do something
  }
  firstName2Changed(inName: string) {
     this.fullName2 = inName;
     // do something
  }
  sharedLastNameChanged(inName: string) {
     this.sharedLastName = inName;
     // do something
  }
}

最后，我認為您不需要指定providers: [NameInputComponent] FullNamesComponent中的 providers: [NameInputComponent] ，因為NameInputComponent是您在FullNamesComponent模板中使用的指令，並且不作為DependencyInjection機制的一部分。

希望我理解您的觀點，對您有幫助