Question

我们正在开发一个角度应用程序（使用Angular 5）。

我们的组件通常具有如下定义的输入和输出参数：

export class MultipleItemPickerComponent implements OnInit {
  @Input() itemPickerHeaderText: string;
  @Output() multipleItemsPickerOkClick: EventEmitter<string[]> = new EventEmitter();
  @Output() multipleItemsPickerCancelClick: EventEmitter<Event> = new EventEmitter();

在相应的模板文件中，它的使用方式如下：

<app-multiple-item-picker itemPickerHeaderText="{{question.texts['reason']}}" (multipleItemsPickerOkClick)="multipleReasonsPickerOkClick($event)" (multipleItemsPickerCancelClick)="multipleReasonsPickerCancelClick($event)"></app-multiple-item-picker>

一切正常。

但是在同一个类中，可以将输入值设置为与原始输入值不同的值。

removeItemClick() {
    this.itemPickerHeaderText = "something completely different";
}

我想阻止对输入值的任何更改。有没有办法做到这一点？

Answer 1

您可以将输入属性标记为readonly，typescript编译器将阻止某人从构造函数外部更新类中的输入值。

@Input() 
public readonly itemPickerHeaderText: string;

这有点hacky但它应该适用于你的情况。因为角度编译器不会抱怨它是只读的并且typescript编译器不知道角度输入绑定。

防止更改输入值

1 个答案: