角度 6 元素布尔输入参数答案

【问题标题】：angular 6 element boolean input parameter角度 6 元素布尔输入参数
【发布时间】：2018-09-26 22:22:57
【问题描述】：

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

这里是组件sn-p：

export class MyComponent implements OnInit, OnDestroy {

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

这是我在 plain old html 中的使用方式：

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

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

我在这里错过了什么？

谢谢！

【问题讨论】：

标签： angular angular6 angular-elements

【解决方案1】：

您可以将showTitle 属性定义为getter/setter，并在setter 中将字符串值转换为布尔值：

private _showTitle = true;

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

【讨论】：

从父角度组件中使用这个组件是正确的，但我特别有问题将它用作角度元素。 angular.io/guide/elements
你是如何传递你的输入元素的？如果您预加载输入项，则在您的路线中使用解析器应该不会有任何问题。然后使用激活的路线将您的物品传递给
感谢您的帮助，我想我可以作为输入参数发送给角度元素的唯一内容是字符串变量，这是有道理的，因为我需要从 html 元素属性中提供它们。

【解决方案2】：

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

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

【讨论】：

当您在属性名称周围添加[] 时，这些值将被评估为表达式。这意味着任何文字字符串都必须用引号括起来（在外引号内），例如[environment]="'DEV'"。
您的答案适用于 Angular 应用，但很可能该 Web 组件不会在另一个 Angular 应用中使用

【解决方案3】：

布尔转换可以用getter来完成。

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

【讨论】：