Angular2 alternative isoliert Umfang (von Winkel 1)

Question

I-Studie Angular 2.Bei Beispiel Komponente benötigt ein Argument Benutzer Informationen über den Benutzer zu machen:

<user-profile [user]="currentUser"></user-profile> 

ich diese Komponente in mehr als einer Stelle verwendet werden soll/ Wie isoliert Bindung in der Komponente 'Benutzerprofil'?

aktualisieren Zum Beispiel verwende ich Komponente

@Component({ 
selector: 'my-hero-detail', 

template: ` 

<div *ngIf="hero"> 
<h2>{{hero.name}} details!</h2> 
<div><label>id: </label>{{hero.id}}</div> 
<div> 
    <label>name: </label> 
    <input [(ngModel)]="hero.name" placeholder="name"/> 
</div> 
</div> 
` 
}) 

und i passieren Daten in der Komponente

<my-hero-detail [hero]="selectedHero"></my-hero-detail> 

Ändern hero.name die Änderungen und selectHero macht.

, wie es vermeiden? Ich will nicht

Answer 1

Ihr Kind schreiben Komponente wie diese

import { Component, Input } from '@angular/core';  
 
    import { User } from './user'; 
 
     
 
    @Component({ 
 
     selector: 'user-profile', 
 
     template: ` 
 
     <h3>User Name: {{user.name}} says:</h3> 
 
     <p>Telephone: {{user.telephone}}</p> 
 
     ` 
 
    }) 
 
    export class UserProfile{ 
 
     @Input() user: User; 
 
    }

geändert selectHero

dann die Eltern konstruieren und Benutzer in Kind weitergeben.

import { Component } from '@angular/core';  
 
    import { User } from './user'; 
 
     
 
    @Component({ 
 
     selector: 'user-list', 
 
     template: ` 
 
     <user-profile *ngFor="let currentUser of users" [user]="currentUser"></user-profile> 
 
     ` 
 
    }) 
 
    export class UserListComponent { 
 
     heroes = User[]; 
 
    }