Angular2 ngOnchanges沒有顯示高度變化與可觀察

Question

我有一個div，改變高度，當我按下「隱藏」按鈕。

我已經通過服務（如cookbook）捕獲了這個高度變化，當我按下「獲取高度」按鈕時，我獲得了正確的值更改。

但我想看看我是否可以在不按下按鈕的情況下獲得高度值。這意味着我正試圖實現一個ngOnChanges鉤子以查看高度何時發生變化，然後在新控制檯發生更改時將新高度記錄到控制檯。

但我沒有得到我的ngOnChanges鉤子的迴應，儘管我已經看過每一個問題，並試圖實現它一樣。

我的組件

import { Component, SimpleChanges } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 

import { MissionService } from '../../main2/mission.service'; 

@Component({ 
    selector: 'test-child3', 
    templateUrl: './child3.component.html', 
    styleUrls: ['./child3.component.css'] 
}) 
export class Child3Component { 

    private switch1 = false; 
    height: number; 
    subscription: Subscription; 

    constructor(private missionService: MissionService) { 
    this.subscription = missionService.missionHeight$.subscribe(
     missionData => { 
     this.height = missionData; 
     console.log("constructor height = " + this.height) 
     }) 
    } 

    ngOnChanges(changes: SimpleChanges) { 
     if (changes['height'].currentValue) { 
      console.log("ngOnChanges height = " + this.height); 
     } 
    } 

    heightF() { 
    this.height = document.getElementById('mainDiv').offsetHeight; 
    this.missionService.announceHeight(this.height); 
    console.log("heightF() height = " + this.height); 
    } 

    onSwitch1() { 
    this.switch1 = !this.switch1; 
    } 

我的HTML

<div id="mainDiv">  
    <button id="hide" (click)="onSwitch1()">Hide</button> 
    <button (click)="heightF()">Get Height</button> 
    <div *ngIf="switch1" id="childDiv"> 
    </div>  
</div> 

這是檢測控制檯響應每次都遇到我隱藏/取消隱藏內部DIV時間，然後按 「獲得高度」按鈕，所以我知道我的觀察者正在工作並改變高度。

constructor height = 21 
heightF() height = 21 
constructor height = 198 
heightF() height = 198 

Answer 1

根據documentation：

響應當角（重新）設置數據綁定輸入屬性。方法 接收當前和前一個屬性 值的SimpleChanges對象。

在ngOnInit之前調用並且每當一個或多個數據綁定輸入 屬性發生更改時。

你的高度屬性不是輸入，你應該@input（）屬性以及您ngOnChange方法將被輸入從父組件檢測到您綁定數據的變化。

f.e.

簡單parent.component.ts

@Component({ 
    moduleId: module.id, 
    selector: 'simple-parent', 
    template: ` 
     <simple-child [someInput]="someValue"></simple-child> 
    ` 
}) 
export class SimpleParentComponent implements OnInit { 

    someValue: string; 

    constructor() { } 

    ngOnInit() { } 

} 

簡單child.component.ts

@Component({ 
    moduleId: module.id, 
    selector: 'simple-child', 
    template: 'simple-child.component.html' 
}) 
export class SimpleChildComponent implements OnInit, OnChanges { 

    @Input() someInput: string; 

    constructor() { } 

    ngOnInit() { } 

    ngOnChanges(changes:{[propName: string]: SimpleChange}): any { 
     if(changes['someInput'] && this.someInput) { 
     console.log('someInput change detect'); 
     } 
}