Die Angular2-Komponentenansicht wird bei der Wertänderung über die Methode

Question

nicht aktualisiert

In Angular2 erstelle ich ein modales Fenster, das ein- und ausgeschaltet werden muss. Während der Entwicklung stolperte ich über etwas Seltsames:

Wenn ich die activate Variable in meinem Modal class mit einem externen Knopf ändere. Die Ansicht wird nicht aktualisiert.

Das Drucken der activate Variable in der Konsole geht ohne Probleme. Ich sehe die Variable zwischen true und false umschalten.

Es sieht aus wie ich Code fehlt, der die Ansicht zwingt, mit den neuen Werten zu rendern.

Hat jemand eine Idee was ich hier vielleicht vermisse?

Der Code unten in einer 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

Nur weil Sie eine modale injizieren und eine modale bekommen , bedeutet nicht, dass es th ist Die modale Instanz, die Sie wollen. Wenn Sie es in providers Angular DI Liste schafft nur eine Instanz und übergibt sie in, aber dieses Beispiel ist nicht auf den <modal> Tag an allen

Benutze stattdessen @ViewChild() zu erhalten eine Referenz

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

bezogen

Für Ihren Beispielcode ist es sowieso nicht nötig, eine direkte Referenz zu bekommen. Sie können die Bindung mit @Input() und @Output() verwenden. Wenn die Komponente und die modalen ist nicht so eng verwandt (wenn Sie eine globale modale Instanz verwenden, das von der gesamten Anwendung ein gemeinsamer Dienst mit einem Observable, die über Wertänderungen genutzt werden kann benachrichtigt könnte ein besserer Ansatz sein.

Answer 2

working plunker

I Anbieter zu Richtlinien geändert haben mögen,

directives: [Modal] 

Und ich bin mit @ViewChild Zugriff auf ModalCmp erhalten.

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

}