查看不更新爲基類更改

我正在使用Angular 4.我有一個基類，它有一個保護變量，在視圖切換時不會更改。爲了傳播活動需要做些什麼？查看不更新爲基類更改

這裏是我的基類：

export class MyBaseComponent { 
    protected showCDNumbers: boolean = false; 

    toggleCDNumberVisibility() { 
     this.showCDNumbers = !this.showCDNumbers; 
    } 
}

這裏是從基繼承的類：

export class MyComponent extends MyBaseComponent { 

}

這裏是視圖：

<div>{{showCDNumbers}}</div> 
<a (click)="toggleCDNumberVisibility()">Toggle</a>

來源

2017-09-13 Greg ' ' Wildman' ' Finzer

請問您是否可以添加顯示您調用'toggleCDNumberVisibility（）'方法的調用代碼片段（在模板中），還是您沒有將它放在那裏？ – amal

我添加了切換事件。它工作，它確實稱之爲。我在那裏放了一個console.log。 –

你可以試試這個查看方法調用時視圖是否更改。通過constructor從@angular/core庫中將ChangeDetectorRef注入到兩個類（父類和子類）中，並使用detectChanges()這樣的方法。

BaseComponent

import { ChangeDetectorRef } from '@angular/core' 

protected showCDNumbers: boolean = false; 

constructor (protected ref: ChangeDetectorRef) {} 

toggleCDNumberVisibility() { 
this.showCDNumbers = !this.showCDNumbers; 
this.ref.detectChanges(); 
}

ChildComponent

import { ChangeDetectorRef } from '@angular/core' 

constructor (protected ref: ChangeDetectorRef) { 
super(ref); 
}

來源

2017-09-13 16:59:27 amal

稍微不同的版本：

export class MyBaseComponent { 
    protected showCDNumbers: boolean = false; 
    constructor(value){ 
    this.showCDNumbers=value; 
    } 

    toggleCDNumberVisibility() { 
     this.showCDNumbers = !this.showCDNumbers; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: [ './app.component.css' ] 
}) 
export class AppComponent extends MyBaseComponent{ 
    name = 'Angular 4'; 
    constructor(){ 
    super(true); 
    } 
    toggleCDNumberVisibility() { 
     super.toggleCDNumberVisibility(); 
    } 

}

DEMO

來源

2017-09-13 17:02:37 Vega

查看不更新爲基類更改

回答

相關問題