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，然后按“Get Height”按钮时得到的concole响应，所以我知道我的观察者正在工作并改变高度。

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

Answer 1

根据documentation：

Angular（重新）设置数据绑定输入属性时的响应。方法   接收当前和以前属性的SimpleChanges对象   值。

在ngOnInit之前以及每当一个或多个数据绑定输入时调用   属性改变。

您的高度属性不是输入，您应该 @Input（）属性，而 ngOnChange 方法将通过父组件的输入检测绑定数据的更改。 / p>

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

Angular2 ngOnchanges没有显示具有可观察性的高度变化

1 个答案: