时间戳

首页 > 解决方案 > 防止更改输入值

angular - 防止更改输入值

问题描述

我们正在开发一个 Angular 应用程序（使用 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";
}

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

标签： angulartypescriptangular5

解决方案

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

@Input() 
public readonly itemPickerHeaderText: string;

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

推荐阅读