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