Question

直到现在，我已经相当习惯于更改组件中@Inputs的值了，直到最近，在一次请求请求审核期间，我的一位同事评论道：

分配@Input？（╬‸Ó）

所以现在我很好奇。这一定是一件坏事吗？如果我想更改@Input()绑定，是否应该为其创建一个set访问器？

上一个：

@Input() name: string;

public changeName(): void {
    this.name = 'Bob';
}

当前

：

private nameInternal: string;

@Input set name(value: string) {
    this.nameInternal = value;
}

是否有首选的方法？谢谢

Answer 1

不确定为什么要设置输入，如果要保留纯单向数据流，则可以使用EventEmitter API和@Output装饰器通知父组件某些更改，并在父组件中进行修改组件。

首先，您需要导入 Output 和 eventEmitter 来装饰组件内部的新更改属性。

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

@Component({ … })
export class HelloComponent  {
  @Input() 
  name: string;
  @Output()
  change: EventEmitter<string> = new EventEmitter<string>();

  // …

  }

我们的更改输出为EventEmitter类型，并且正在发出字符串类型

要调用事件EventEmitter实例，我们调用this.change（）方法向父对象发出事件。

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1> <button type="button" (click)="changeName()"> Change name</button>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() 
  name: string;
  @Output()
  change: EventEmitter<string> = new EventEmitter<string>();

  changeName(){
    this.change.emit('Bob');
  }
}

这将向我们在父级中设置的（更改）侦听器发出更改

<hello 
name="{{ name }}"
(change)="nameChange($event)">
</hello>

下一个链接显示了一个有效的示例：

https://stackblitz.com/edit/angular-gjbczx

将值分配给@Input绑定

1 个答案: