如何创建在其他指令出现在Angular中之前将其删除的指令

Question

我正在尝试制定一条指令，以防止触发另一条指令。我试图同时使用结构性和非结构性指令来完成此操作，但它们都没有起作用。

我正在使用的简单html：

<p appRemover appColor>
  Start editing to see some magic happen :)
</p>

假设我有一个颜色指令，只是更改了应用于红色的元素的颜色属性。这是color指令的代码：

constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    this.el.nativeElement.style.color = 'red'
  }

我将创建另一个指令，卸妆指令，它将执行以下操作：

constructor(private el: ElementRef, private ren: Renderer2) { }

  ngAfterViewInit(): void {
    this.ren.removeAttribute(this.el.nativeElement, 'appColor');
  }

这里的想法是，我可以在呈现指令之前将指令从元素中删除。在移除appColor属性后打印el.nativeElement之后，该属性似乎消失了，但是颜色已经更改为红色。理想情况下，remover指令会在color指令之前触发，但我似乎无法找出Angular如何选择顺序。

我什至尝试了结构指令来解决这个问题：

constructor(private vc: ViewContainerRef, private template: TemplateRef<any>, private ren: Renderer2) { }

  ngOnInit() {
    this.ren.removeAttribute(this.template.elementRef.nativeElement, 'appColor');
    this.vc.createEmbeddedView(this.template);
  }

但是实际上抛出一个错误，说el.removeAttribute不是一个函数？

是否存在用于使用指令来删除或停止在同一元素上触发的另一指令的已建立模式？如果没有，是否有任何实际方法？

Answer 1

在Angular中，无论如何（Github Issue），您都无法动态创建/删除指令。如果它是导入的库，则需要将其派生并在该指令中添加例如@Input() disabled，因此当它处于活动状态时，它不会触发事件（当然，您也需要执行此逻辑）。

Answer 2

据我所知，您不能有条件地删除指令。您可以做的是，使元素具有两个版本，一个带有指令，一个不带有指令，然后使用*ngIf... else选择适当的版本。为避免重复该元素的内部内容，请在一个通用模板中声明该内容，然后将该模板插入ngTemplateOutlet。

<p *ngIf="useColorDirective; else noColorDirective" appColor>
  <ng-container *ngTemplateOutlet="content"></ng-container>
</p>
<ng-template #noColorDirective>
  <p><ng-container *ngTemplateOutlet="content"></ng-container></p>
</ng-template>
<ng-template #content>
  The inner content is here...
</ng-template>

请参见this stackblitz以获取演示。