如果元素上的指令/输入名称之间存在冲突，该怎么办？

Question

由于指令名称和输入名称在Angular中共享相同的名称空间（它们被称为唯一名称）。如果某些名称冲突，该怎么办？

示例：我在同一元素上使用了两个指令，这两个指令具有相同名称的输入，并且由于这些名称来自外部库，因此我没有任何帮助。

Answer 1

您可以创建一个具有其他名称的新指令，并使用简单地扩展原始指令的类来创建新指令，然后可以绑定到@Input属性。

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective extends OriginalHighlightDirective {

  constructor(private el: ElementRef) { super(el); }

  @Input('aliasInputColor') originalInputName: string;

}

---

然后您可以使用aliasInputProperty：

<p appHighlight aliasInputColor="yellow">Highlight me!</p>