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的注意事项：：此修饰符仅在更改prop时触发，这意味着onNameChanged()方法不会在首次设置prop时被调用。为了拦截第一组，必须使用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>);
  }
}

模具更改@Prop（）检测

1 个答案: