3

に公開したパブリック メソッドがありwindowます。このメソッドは と対話しComponent、テンプレートで監視している変数を変更します。しかし、値を変更すると、*ngIf()トリガーされません。

app.component

constructor(private _public: PublicService,) {
        window.angular = {methods: this._public};
    }

公共サービス

export class PublicService {

    constructor(
        private  _viewManager: ViewManagerComponent,
    ) {}

    CallMe(){
        this._viewManager.renderView('page1')
    }
}

LayoutManagerComponent

@Component({
    selector: 'view-manager',
    template: `<page *ngIf="view == 'page1'"></page>`
})
export class ViewManagerComponent {
    //This is the variable being watched
    view = "page";

    renderView = function(type){
        console.log(type)
        this.view = type;
        console.log(this.view)
    };
}

したがって、ビューが最初に読み込まれるとき、ビューは空白です。次に、入力すると変数がangular.methods.CallMe()変更され、コンポーネントのhtmlが表示されます。コンソール機能が正常に呼び出された場合、ビューだけが変更されません。viewpage1renderView

----更新 - まだ動作していません -------

export class ViewManagerComponent {
    constructor(private zone:NgZone,private cdRef:ChangeDetectorRef) {

    }
    view = "page";

     @Output() renderView(type){
        // type is 'page'
        console.log(this.view)
        this.zone.run(() => {
            // type is 'page'
            console.log(this.view)
            this.view = type;
            // type is 'page1'
            console.log(this.view)
        });
        // type is 'page1'
        console.log(this.view)
        //cdRef errors: 
        //view-manager.component.ts:36 Uncaught TypeError: this.cdRef.detectChanges is not a function(…)
        this.cdRef.detectChanges();
    };

}
4

1 に答える 1

3

この場合、変更は Angulars ゾーンの外で実行されるコードによって引き起こされるため、Angular2 は変更検出を実行する必要があることを知りません。

変更検出を明示的に実行する

contructor(private cdRef:ChangeDetectorRef) {}

someMethodCalledFromOutside() {
  // code that changes properties in this component 
  this.cdRef.detectChanges();
}

Angulars ゾーン内のコンポーネント プロパティを明示的に変更するコードを実行します。

contructor(private zone:NgZone) {}

someMethodCalledFromOutside() {
  this.zone.run(() => {
  // code that changes properties in this component 
  });
}

zoneメソッドは、現在の// code that changes properties in this componentコンポーネントのプロパティを変更するだけでなく、Angulars ゾーン内のコードを実行する必要がないthis.router.navigate()ため、他のコンポーネント (他のコンポーネントのメソッドのメソッド参照を呼び出すなど) にも変更を加える場合に適しています。zone.run()この呼び出しによって変更が発生する可能性があるすべてのコンポーネントで、変更検出を明示的に処理します。

function(...)代わりに使用すると、Angular コンポーネント内のコードで() =>予期しない動作が発生する可能性があります。this

詳細については、この同様の質問に対する私の回答も参照してくださいAngular 2 - 外部 js ライブラリとの typescript 関数の通信

アップデート

export class ViewManagerComponent {
    constructor(private zone:NgZone,private cdRef:ChangeDetectorRef) {
      self = this;
    }
    view = "page";

     @Output() renderView(type){
        // type is 'page'
        console.log(self.view)
        self.zone.run(() => {
            // type is 'page'
            console.log(self.view)
            self.view = type;
            // type is 'page1'
            console.log(self.view)
        });
        // type is 'page1'
        console.log(self.view)
        self.cdRef.detectChanges();
    };

}
于 2016-10-11T05:43:14.297 に答える