模板更改@Prop() 检测 [英] stencil change @Prop() detection

问题描述

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

但我不知道如何在模板中.

import { Component, Input, OnInit } from '@angular/core';@成分({选择器:'我的名字'，模板:`<h2>名字:{{name}} ({{_name}})</h2>`，})导出类 ChildComponent 实现 OnInit {私有_name:字符串；构造函数(){}获取名称():字符串{//变换显示值返回 this._name.toUpperCase();}@输入()设置名称(名称:字符串){console.log('prev value: ', this._name);console.log('得到名字:', name);this._name = 名称；}ngOnInit() {console.log('on init');控制台.log(this._name);}}

我需要检测属性变化

解决方案

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

@Watch('name')onNameChanged(新值:字符串，旧值:字符串){this._name = newValue;}

<块引用>

@Watch 的注意事项: 这个装饰器只在 prop 改变时触发，这意味着 onNameChanged() 方法不会被调用第一次设置道具.为了拦截第一组，你必须使用 componentWillLoad() 钩子.

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

工作示例:

import { Component, Prop, Watch } from '@stencil/core';@成分({标签:'我的名字'})导出类 ChildComponent {私有_name:字符串；@Prop() 名称:字符串 = '';@Watch('姓名')onNameChanged(名称:字符串){console.log('prev value: ', this._name);console.log('得到名字:', name);this._name = name.toUpperCase();}组件WillLoad(){this.onNameChanged(this.name);}使成为() {return (<h2>名字:{this.name} ({this._name})</h2>);}}

How can I detect prop changes in stencil, in angular is something like this:

But I don't know how is in stencil.

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

I need to detect properties changes

解决方案

You can use the @Watch decorator on a method that will trigger when the property changed.

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

Note on @Watch: this decorator only trigger on prop changed, it means the onNameChanged() method won't be called the first time that prop is set. In order to intercept the first set, you have to use the componentWillLoad() hook.

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

Working example:

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() 检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！