Bind ngModel Wert über Komponenten

Question

Sagen Sie bitte about.component.ts mit der folgenden haben:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'about-section', 
    template: ` 
    <input [(ngModel)]="name" placeholder="First Name"> 
    <p>{{name || 'user'}}</p> 
    ` 
}) 

export class AboutComponent { 

} 

Dann haben Sie notes.component.ts:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'notes-section', 
    template: ` 
    <p>{{name || 'user'}}</p> 
    ` 
}) 

export class NotesComponent { 

} 

Beide Dateien sind Komponenten von app.component.ts:

import { Component } from '@angular/core'; 

import { AboutComponent } from './about.component'; 
import { NotesComponent } from './notes.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <about-section></about-section> 
    <notes-section></notes-section> 
    `, 
    directives: [AboutComponent, NotesComponent] 
}) 

export class AppComponent { } 

Meine Frage ist, wie würden Sie die ngModel ‚name‘ Eigenschaft von about.component.ts-notes.component.ts so binden, wenn Sie Ihren Namen schreiben, wird die Änderung spiegelt sich sowohl in der Noten-Komponente und die über Komponente?

Answer 1

Eine Möglichkeit, es zu tun ist, mit EventEmitter:

@Component({ 
    selector: 'about-section', 
    template: ` 
    <input [ngModel]="name" (ngModelChange)="name = $event; modelChanged.emit($event)"> 
    <p>{{name || 'user'}}</p> 
    ` 
}) 
export class AboutComponent { 
    @Output() modelChanged = new EventEmitter(); 
} 

@Component({ 
    selector: 'notes-section', 
    template: `<p>{{name || 'user'}}</p>` 
}) 
export class NotesComponent {} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <about-section (modelChanged)="notes.name = $event"></about-section> 
    <notes-section #notes></notes-section>`, 
    directives: [AboutComponent, NotesComponent] 
}) 
export class AppComponent { } 

prüfen demo plunker here

Zunächst extrahiert i Banane in einem Kasten [(ngModel)]="name"() EventEmitter Ereignis aus der Komponente zu emittieren ngModel enthält.

<input [ngModel]="name" (ngModelChange)="name = $event; modelChanged.emit($event)"> 

Dann i auf dieses Ereignis abonniert nur in übergeordnete Komponente:

<about-section (modelChanged)="notes.name = $event"></about-section> 

aber bevor sie gehalten i Bezug auf andere Komponente name ändern zu können, wie notes.name = $event in dem obigen Code gezeigt, wo $event ist repräsentiert "Nutzlast" des angehobenen Ereignisses (Eingabewert in diesem Fall).

<notes-section #notes></notes-section>