如何有条件地设置Angular2组件输入？

【问题标题】：How to set Angular2 component input conditionally?如何有条件地设置Angular2组件输入？
【发布时间】：2018-07-17 14:42:04
【问题描述】：

考虑以下情况。

父组件：

<div title="title1">
  <my-component input="title2"></my-component>
  <my-component></my-component>
</div>

我的组件：

<div [title]="input">ABC</div>

这里的问题是，第一个“ABC” div 将具有 "title2" 工具提示，而第二个将具有 MyComponent 的默认值作为 input，这将“覆盖”"title1" 工具提示而不是想要的。

如果没有收到“输入”，如何避免在 MyComponent 模板中设置“标题”？

【问题讨论】：

这可能对stackoverflow.com/questions/41273384/…有帮助

标签： angular angular2-components

【解决方案1】：

似乎绑定子元素的title 属性将覆盖父元素title，即使input 是null 或undefined。但是，根据this stackblitz，将title属性与[attr.title]绑定允许在input为null或undefined时继承父title：

<div [attr.title]="input">ABC</div>

与

@Input() input: string; // undefined by default

【讨论】：