如何在角度 5 中将变量设置为可选@Input?

Question

我想@Input参数设置为可选。

例如：

儿童1.html：

templateUrl:'common-html.html'

儿童1.TS：

currentValue : boolean = true;

案例2：

儿童2.html：

templateUrl:'common-html.html'

儿童2.TS：

// Not declared **currentValue**

通用HTML.html：

<app-master [isLogEnabled]="currentValue"></app-master>

但是上面的更改在 AOT 时给出了错误：

属性"isLogEnabled"在类型Child2.Component上不存在

所以我不能更改以下的 HTML：

<app-master [isLogEnabled]="currentValue"></app-master>

Answer 1

我会这样做：

App-master-Component.ts

@Input() isLogEnabled: boolean = false; // can change false to true, null or w.e. depending on what you want as the default
// if consumer passes in a value, it will be overridden

然后在 Child2.component 中.html

<app-master></app-master>

如果 Child2.component.ts 文件中不存在当前值，则无法绑定[isLogEnabled]="currentValue"。

Answer 2

您不能提供未声明的属性。 但是你可以使用这样的东西：

<app-master [isLogEnabled]="currentValue || false"></app-master>

或者在组件内部，您可以创建 getter：

get isLogEnabled() {
return this.isLogEnabled || false;
}

或者您可以尝试使用"？">

@Input() isLogEnabled?: boolean;