Angular 6元素布尔输入参数

Question

我正在构建一个 Angular 元素 并向其传递一些输入参数。我可以很好地传递一些字符串输入参数（如 ikrId 和 environment），但是在通过 Angular 元素 传递布尔值到 showTitle 输入属性时遇到了困难（从父级 Angular 组件将 showTitle 属性传递给组件可以正常工作）。

下面是组件片段：

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>

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

我在这里漏掉了什么？

谢谢！

- cobolstinks

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";
}

- ConnorsFan

---

这对于从父Angular组件使用此组件是正确的，但我特别在使用此作为Angular元素时遇到了问题。https://angular.io/guide/elements - cobolstinks

你是如何传递输入元素的？如果你预加载了输入项，使用路由解析器时就不应该有任何问题。然后使用激活路由将你的项目传递给<my-element>。只是想帮忙。我有一个问题https://stackoverflow.com/questions/47874927/why-images-blink-on-safari-but-does-not-in-chrome-when-the-app-resizes。我必须预加载数据来解决我的问题。 - harold_mean2

谢谢您的帮助，我想我只能将字符串变量作为输入参数发送到Angular元素，这是有道理的，因为我需要从HTML元素属性中提供它们。 - cobolstinks

Answer 2

传递模板中的输入语法为[<input_name>]="<value>"；您应该使用。

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

- Massimo Costa

---

当您在属性名称周围添加[]时，值将被评估为表达式。这意味着任何字面字符串都必须用引号括起来（在外部引号内），例如[environment]="'DEV'"。 - seairth

你的回答适用于一个Angular应用程序，但很可能Web组件不会在另一个Angular应用程序中使用。 - Mick

Answer 3

布尔转换可以通过一个 getter 来完成。

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

- John H