0

次のシナリオを検討してください。three を使用しNameInputComponentて、それぞれテキスト入力をラップし、次を構築しFullNamesComponentます。

  • 2 つNameInputComponentの s、個々の名のペア ( firstName1& firstName2)
  • 1 つNameInputComponent、共通の姓 ( sharedLastName)

FullNamesComponent は、次の 2 つの完全な名前を公開する必要があります。

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

これらのコンポーネントを一緒にリンクする適切な方法は何でしょうか? を使用してみngModelました。これにより、入力の値を の変数にバインドできますが、NameInputComponent構築を続ける方法がわからなくなって、親コンポーネントでこれらの値を使用して何かを行うことができます。私が理解していることから、を使用しEventEmitterて値を親から消費可能にする必要がありますが、これについてどうすればよいかわかりません。

これは送信されるフォームとして使用されていないことに注意してください。出力にバインドしてページの他の部分に使用したり、ページの他のセクションへのバインディングを介して/プログラムで入力の内容を変更したりできるようにしたいと考えています。

これが私がこれまでに持っているものです：

name-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
  }
}

最後に、 NameInputComponent は FullNamesComponent のテンプレートで使用するディレクティブであり、DependencyInjection メカニズムの一部ではないため、providers: [NameInputComponent]FullNamesComponentで指定する必要はないと思います。

私はあなたのポイントを理解し、これが役に立てば幸いです

于 2016-05-16T21:40:18.663 に答える