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

Question

考虑以下情况。

父组件：

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

我的组件：

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

这里的问题是，第一个 "ABC" div 将具有 "title2" 工具提示，而第二个将具有 MyComponent 具有的任何默认值 input，并且这将 "override" "title1" 不需要的工具提示。

如果没有收到 "input"，如何避免在 MyComponent 模板中设置 "title"？

Answer 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

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

How to set Angular2 component input conditionally?

angular2-components

angular