模具变更@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>);
  }
}