Question

我有一个具有输入属性Format的自定义组件ComponentA 我可以这样使用它：

<componentA Format="#.00"></componentA>

ComponentA是我不想接触的第三方组件。

我想建立一个名为MyFormatDirective的指令，它将该组件上的属性设置为固定值“＃.00”，这样我可以编写上面的内容：

<componentA MyFormat></componentA>

这当然是一种简化。实际上，我希望该指令设置多个属性-基本上是自定义配置组件

创建包装它的组件不是一种选择，因为componentA是依赖特定DOM结构的第三方库的大型结构的一部分。包装它打破了这一点。而且，我需要这种方法来通过多个指令设置多种类型的配置

请帮助我实现这一目标，或提出替代方案

Answer 1

您可以使用相同的选择器（或不同的选择器）创建指令，然后将属性添加到组件中，然后将组件注入内部：

import { Directive, Input } from '@angular/core';
import { ComponentAComponent } from './component-a.component';

@Directive({
  selector: 'component-a'
})
export class ComponentADirective {
  constructor(cmp: ComponentAComponent) {
    cmp.format = '#.00';
  }
}

完整的演示： https://stackblitz.com/edit/angular-qnxqqz?file=src%2Fapp%2Fcomponent-a.directive.ts

使用Angular 6指令在组件上设置属性

1 个答案: