0

考虑以下场景。我想使用三个NameInputComponent，每个包装一个文本输入，来构造一个FullNamesComponent：

  • 两个NameInputComponents，用于一对单独的名字 ( firstName1& firstName2)
  • 一NameInputComponent、共享姓氏（sharedLastName）

FullNamesComponent 应该公开两个全名：

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

将这些组件链接在一起的正确方法是什么？我尝试使用ngModel，它允许我将输入的值绑定到 中的变量NameInputComponent，但我不知道如何继续构建，以便我可以在父组件中对这些值做一些事情。据我了解，我需要使用 anEventEmitter来使父母可以消耗价值，但我不知道该怎么做。

我应该注意这没有被用作要提交的表格。我希望绑定到输出并将它们用于页面的其他部分，以及能够以编程方式/通过绑定到页面的其他部分来更改输入的内容。

这是我到目前为止所拥有的：

名称-input.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}} &amp; {{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
}
4

1 回答 1

0

我会考虑这样的事情。

假设您想让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}} &amp; {{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中指定，因为 NameInputComponent 是您在 FullNamesComponent 模板中使用的指令，并且不是 DependencyInjection 机制的一部分。

我希望我已经理解你的观点并且这会有所帮助

于 2016-05-16T21:40:18.663 回答