обнаружение смены трафарета @Prop () - PullRequest
Новая
       10

обнаружение смены трафарета @Prop ()

0 голосов
/ 24 октября 2018

Как я могу обнаружить изменения реквизита в трафарете, в угловом это что-то вроде этого:

Но я не знаю, как в трафарете. 

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

Мне нужно определить свойстваизменения

1 Ответ

0 голосов
/ 24 октября 2018

Вы можете использовать декоратор @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>);
  }
}
...