Угловые 2 Детские компоненты обнаруживают изменения в родительском

Question

У меня есть компонент, который отображает список «элементов», которые являются компонентами, созданными с помощью селектора. У меня есть флажок, который я хочу, при нажатии, чтобы обновить «состояние» всех дочерних компонентов.

Im действительно изо всех сил пытается найти правильное решение для этого. Для получения дополнительной информации см. Plunkr.

//our root app component 
import {Component, EventEmitter} from 'angular2/core' 

class Item { 
    name: boolean; 

    constructor(name: string) { 
    this.name = name; 
    } 
} 

@Component({ 
    selector: 'my-item', 
    template: ` 
    <div> 
     <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label> 
    </div> 
    ` 
}) 
export class MyItemComponent { 
    state: boolean = false; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div style="border: 1px solid red;"> 
     <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label> 
    </div> 
    <div *ngFor="#item of items"> 
     <my-item></my-item> 
    </div> 
    `, 
    directives: [MyItemComponent] 
}) 
export class App { 
    state: boolean = true; 
    items: Item[] = []; 

    constructor() { 
    this.items.push(new Item("hello")); 
    this.items.push(new Item("test")); 
    } 
} 

Answer 1

Update

@Component({ 
    selector: 'my-item', 
    inputs: ['state']; // added 
    template: ` 
    <div> 
     <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label> 
    </div> 
    ` 
}) 
export class MyItemComponent { 
    state: boolean = false; 
} 

, а затем использовать его как

<my-item [state]="state"></my-item> 

оригинальный

изменение угла обнаружение не обнаруживает изменений в массивах.
Это должно заставить его работать:

constructor() { 
    this.items.push(new Item("hello")); 
    this.items.push(new Item("test")); 
    this.items = this.items.slice(); 
    } 

Этого путь новый массив (копия) назначенная this.items и поэтому Угловой распознает его как изменение.

В MyItem вам нужен input

@Component({ 
    selector: 'my-item', 
    inputs: ['items']; // added 
    template: ` 
    <div> 
     <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label> 
    </div> 
    ` 
}) 
export class MyItemComponent { 
    state: boolean = false; 
    items: Item[]; // added 
} 

, то вы строите связь с

<my-item [items]="items"></my-item> 

Чтобы получить код, называемый в MyItemComponent когда items изменение реализации ngOnChanges() Смотрите также https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html

export class MyItemComponent { 
    state: boolean = false; 
    items: Item[]; // added 
    ngOnChanges(changes: {[propName: string]: SimpleChange}) { 
    console.log('ngOnChanges - myProp = ' + changes['items'].currentValue); 
    } 
} 

Answer 2

Что сказал @ Гюнтер, это совершенно верно!

То есть, я вижу некоторые ошибки в вашем plunkr:

@Component({ 
    selector: 'my-item', 
    template: ` 
    <div>Hello</div> 
    ` 
}); // <------- Remove the ; 
export class MyItemComponent { 

} 

И вы пропустили компонент в directives собственности:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label> 
    </div> 
    <div *ngFor="#item of items"> 
     <my-item></my-item> 
    </div> 
    `, 
    directives: [] // <-------- Add the MyItemComponent component 
}) 
export class App { 
    (...) 
} 

Редактировать

Вы можете использовать в @ViewChildren декоратор для ссылки детей непосредственно.

@Component({ 
    selector: 'my-app', 
    template: ` 
    (...) 
    `, 
    directives: [MyItemComponent] 
}) 
export class App { 
    (...) 
    @ViewChildren(MyItemComponent) 
    children:MyItemComponent[]; 
    (...) 
} 

Затем вы можете добавить элемент управления в вашем поле, чтобы обнаружить изменения и обновить состояние дочерних компонентов соответственно:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div style="border: 1px solid red;"> 
     <label><input type="checkbox" [(ngModel)]="state" 
      [ngFormControl]="stateCtrl"/> {{state}}</label> 
    </div> 
    <div *ngFor="#item of items"> 
     <my-item></my-item> 
    </div> 
    `, 
    directives: [MyItemComponent] 
}) 
export class App { 
    (...) 
    constructor() { 
    this.items.push(new Item("hello")); 
    this.items.push(new Item("test")); 

    this.stateCtrl = new Control(); 
    this.stateCtrl.valueChanges.subscribe(
     data => { 
     this.children._results.forEach(child => { 
      child.state = data; 
     }); 
     }); 
    } 
} 

Я обновил свой plunkr с этим подходом: https://plnkr.co/edit/nAA2VxZmWy0d4lljvPpU?p=preview.

Смотрите эту ссылку для получения более подробной информации: Why is that i can't inject the child component values into parent component?