Question

我研究Angular 2.例如，组件需要一个用户参数来呈现有关该用户的信息：

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

我想在多个地方使用此组件/ 如何在组件＆＃39; user-profile＆＃39;？

中进行隔离绑定

更新例如，我使用组件

@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>
 `
 })

我在组件中传递数据

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

更改hero.name进行更改并选择更改。

如何避免它？我想选择Hero not changed

Answer 1

像这样编写你的子组件

＆＃13;

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

＆＃13;

然后构造父级并将用户传递给子级。

＆＃13;

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[];
    }

＆＃13;

Angular2替代隔离范围（从角1）

1 个答案: