angular - 模板更改@Prop() 检测

Question

我如何检测模具中的道具变化，角度是这样的：

但我不知道模具中的情况如何。

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'my-name',
  template: `
      <h2>First name: {{name}} ({{_name}})</h2>
  `,
})
export class ChildComponent implements OnInit {
  private _name: string;
  constructor() {}

  get name(): string {
    // transform value for display
    return this._name.toUpperCase();
  }

  @Input()
  set name(name: string) {
    console.log('prev value: ', this._name);
    console.log('got name: ', name);
    this._name = name;
  }

  ngOnInit() {
    console.log('on init');
    console.log(this._name);
  }
}

我需要检测属性变化

Answer 1

您可以@Watch在属性更改时触发的方法上使用装饰器。

@Watch('name') 
onNameChanged(newValue: string, oldValue: string) {
  this._name = newValue;
}

注意@Watch：此装饰器仅在道具更改时触发，这意味着该onNameChanged()方法不会在第一次设置道具时被调用。为了拦截第一组，你必须使用componentWillLoad()钩子。

componentWillLoad(){
  this.onNameChanged(this.name);
}

工作示例：

import { Component, Prop, Watch } from '@stencil/core';

@Component({
  tag: 'my-name'
})
export class ChildComponent {

  private _name: string;

  @Prop() name: string = '';

  @Watch('name')
  onNameChanged(name: string) {
    console.log('prev value: ', this._name);
    console.log('got name: ', name);
    this._name = name.toUpperCase();
  }

  componentWillLoad(){
    this.onNameChanged(this.name);
  }

  render() {
    return (<h2>First name: {this.name} ({this._name})</h2>);
  }
}