angular 6 元素布尔输入参数

Question

我正在构建一个 angular 元素 并将一些输入参数传递给它。我可以很好地传递一些字符串输入参数（ikrId 和环境工作得很好）但是很难通过 angular 元素 将布尔值传递给 showTitle 输入属性（将 showTitle 属性从 parent angular 组件传递给组件工作得很好）。

这是组件片段：

export class MyComponent implements OnInit, OnDestroy {

  @Input() ikrId: string;
  @Input('environment') environment: IkrEnvironment = 'PROD';
  @Input('showTitle') showTitle = true;

下面是我在 普通 html 中的使用方式：

<my-element environment="DEV" ikr-id="889fb69f-71a5-4881-8528-0b43a07599f0" show-title="false"></my-element>

但是节目标题没有传递到我的组件中，它总是正确的。

我在这里错过了什么？

谢谢！

Answer 1

您可以将 showTitle 属性定义为 getter/setter，并在 setter:

中将字符串值转换为布尔值

private _showTitle = true;

@Input('showTitle') 
get showTitle(): boolean {
  return this._showTitle;
}
set showTitle(value: boolean) {
  this._showTitle = "" + value !== "false";
}

Answer 2

在模板中传递 Input 的语法是 [<input_name>]="<value>"；你应该使用

<my-element [environment]="DEV" [ikrId]="889fb69f-71a5-4881-8528-0b43a07599f0" [showTitle]="false"></my-element>

Answer 3

可以使用 getter 进行布尔转换。

@Input('showTitle') showTitleStr: string;
get showTitle() {
    return this.showTitleStr === "true";
}

angular 6 元素布尔输入参数

angular 6 element boolean input parameter

angular

angular6

angular-elements