Angular2組件視圖不會通過方法更新值更改

Question

在Angular2中，我創建了一個需要打開和關閉的模式窗口。在開發過程中，我偶然發現了一些奇怪的東西：

當我使用外部按鈕更改我的Modal class中的activate變量時。該視圖不更新。

在控制檯中打印activate變量沒有任何問題。我看到了true和false之間的變量切換。

它看起來像我缺少強制視圖呈現與新值的代碼。

有沒有人有一個想法，我可能會錯過這裏？

在Plunkr

app.ts下面的代碼

import {Component} from 'angular2/core'; 
import {Modal} from './modal'; 

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

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

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

     <modal></modal> 

    </div> 
    `, 
    directives: [Modal] 
}) 
export class App { 
    constructor(private modal: Modal) { 

    } 

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

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

modal.ts

import {Component, Injectable} from 'angular2/core' 

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

@Injectable() 
export class Modal { 

    activate: true; 

    constructor() { 
    this.activate = false; 
    } 

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

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

} 

Answer 1

僅僅因爲你注入一個模式，並得到一個模態，並不意味着它是th你想要的模態實例。如果您在providers角DI列出它只是創建一個實例，並在傳遞，但這種情況是不是在所有

改用@ViewChild()相關<modal>標籤得到一個參考

Plunker

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

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

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

     <modal #modal></modal> 

    </div> 
    `, 
    directives: [Modal] 
}) 
export class App { 
    @ViewChild('modal') modal; 
    constructor() { 

    } 

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

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

對於您的示例代碼，無論如何都不需要直接引用。您可以使用與@Input()和@Output()的綁定。如果組件和模式都不是密切相關的（如果你使用的是可以通過整個應用程序中使用全局模式實例與Observable通知約值變化的共享服務可能是一個更好的辦法。

Answer 2

working plunker

我已經改變提供商到指令喜歡，

directives: [Modal] 

而且我使用@ViewChild獲得ModalCmp的訪問權限。

app.ts

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

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

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

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

     <modal></modal> 

    </div> 
    ` 
}) 
export class App { 
    @ViewChild(Modal) vc:Modal; 
    constructor() { 

    } 

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

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

Modal.ts

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

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

//@Injectable() 
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) 
    } 

}