我有一个div,改变高度,当我按下“隐藏”按钮。Angular2 ngOnchanges没有显示高度变化与可观察
我已经通过服务(如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
这是否意味着你只能对来自数据使用ngOnChanges一个父组件?我没有把'@Input()'放在我的height属性前面,但它没有任何区别。 –
只能对通过输入传递的数据进行ngOnChanges转换。只是添加注释将无济于事。我编辑了我的答案,以显示您正确使用输入为 –
的ngOnChange。最后,我只是将可观察数据发送给父代,并从父代传递给触发ngOnChanges的子代,如同我在代码中那样在一开始的时候。所以,由于你提醒我关于ngOnChanges只处理输入的事实,它间接地回答了我的问题,所以我将其标记为正确。谢谢分配。 –