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

}