2つのAngular 2コンポーネント間の接続が更新されない

Question

ここに投稿された質問には少しバリエーションがあります：Angular2 component view does not update on value change via method

modal componentの変数をtoggle buttons componentから切り替える必要がありますが、ビューは更新されません。

トグルボタンをクリックしたときにモーダルビューの更新を行うにはどうすればよいですか？

参照を参照されたい：plunkr

app.ts

//our root app component 
import {Component, ViewChild} from 'angular2/core'; 
import {Modal} from './modal'; 
import {ToggleButtons} from './togglebuttons'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 

     <toggle-buttons></toggle-buttons> 

     <modal></modal> 

    </div> 
    `, 
    providers: [Modal, ToggleButtons, ], 
}) 
export class App { 
    constructor() { 

    } 
} 

togglebuttons.ts

//our root app component 
import {Component} from 'angular2/core'; 
import {Modal} from './modal'; 

@Component({ 
    selector: 'toggle-buttons', 
    template: ` 
    <div> 

     <button (click)="toggle()">toggle</button> 

     <button (click)="showActivate()">print</button> 

    </div> 
    ` 
}) 
export class ToggleButtons { 
    constructor(private modal: Modal) { 

    } 

    showActivate() { 
    this.modal.showActivate(); 
    } 

    toggle() { 
    this.modal.toggleActivate(); 
    } 
} 

modal.ts

0を

export class Toggle { 
    constructor(private modal: Modal) { 

    } 

に注入

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

@Component({ 
    selector: 'modal', 
    template: ` 
    <div> 
     <h2>Modal: {{activate}}</h2> 
    </div> 
    `, 
    directives: [] 
}) 

export class Modal { 

    activate: true; 

    constructor() { 
    this.activate = false; 
    } 

    showActivate() { 
    console.log('Modal:showActivate', this.activate); 
    } 

    toggleActivate() { 
    this.activate = !this.activate; 
    console.log('Modal:toggleActivate', this.activate); 

    console.log(this.activate) 
    } 
} 

Answer 1

：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <toggle-buttons [modal]="modal"></toggle-buttons> 
     <modal></modal> 
    </div> 
    `, 
    directives: [Modal, ToggleButtons], 
}) 
export class App { 
    @ViewChild(Modal) 
    modal: Modal; 

    constructor() { 

    } 
} 

この入力は、あなたのToggleコンポーネントでは以下のように定義する必要があります。https://plnkr.co/edit/3t5xo9Y6N8iEL4eqw9Gn?p=preview：

@Component({ 
    (...) 
}) 
export class ToggleButtons { 
    @Input() 
    modal:Modal; 

    (...) 
} 

このplunkrを参照してください。

Answer 2

Modalインスタンスは、したがって、プロパティを呼び出す、または変更するのビューに影響を及ぼさない、いくつかの任意のインスタンス角度DIによって作成され、すべてで<modal></modal>要素に関連していませんAppあなたはモーダルを参照して、Toggleコンポーネントへの入力として、それを提供する必要が