Angular 2 有条件地添加属性指令

Question

我在这里看到了两个问题，如何有条件地添加和删除项目的属性 (Is it possible to conditionally display element attributes using Angular2?) 但我的问题是是否可以添加和删除 attribute directives ？我可以添加和删除属性，但 Angular 不会将属性“编译”为属性指令，但属性只是坐在那里什么都不做。以下是 2 个标签的示例：

第一个是我试图有条件地应用属性指令的那个，第二个一直都有它。

这是动图：

这是我如何应用属性（也许有不同的方式来应用属性指令？）

<h1 [attr.colored]="check ? '': null">Testing something</h1>

这是指令：

import {Directive, ElementRef} from '@angular/core'
@Directive({
    selector: '[colored]',
    host: {
        '(mouseenter)': 'onMouseEnter()',
        '(mouseleave)': 'onMouseLeave()'
    }
})

export class colorDirective {
    constructor(private el: ElementRef) {
    }
    onMouseEnter() { this.highlight("yellow"); }
    onMouseLeave() { this.highlight(null); }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

编辑：有几个答案，但它们适用于 AngularJS (1)

Answer 1

不支持。指令仅在静态 HTML 匹配选择器时应用。

Answer 2

您可以将标志传递给指令

在指令中：

ngAfterViewInit()
{
  let tooltip = this.tooltip instanceof Object ? this.tooltip : {disabled: this.tooltip};
  if (!tooltip.disabled) {
    //DO STUFF
  }
}

在 DOM 中：

<span [tooltip]="{disabled: true}"></span>

Answer 3

我知道这是一个迟到的回复，但可能会对某人有所帮助。

您可以将条件作为输入传递给属性指令，

<h1 colored [enable]="check">Testing something</h1>

然后在指令中

    import {Directive, ElementRef} from '@angular/core'

@Directive({
    selector: '[colored]',
    host: {
        '(mouseenter)': 'onMouseEnter()',
        '(mouseleave)': 'onMouseLeave()'
    }
})
        
export class colorDirective {
    
    @Input() enable: boolean = true;

    constructor(private el: ElementRef) {
    }
    onMouseEnter() { 
        if(this.enable){
            this.highlight("yellow");  
        }
    }   

    onMouseLeave() { 
        if(this.enable){
            this.highlight(null); 
        }
    }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}
        

 

Answer 4

因此，在您可以使用 $compile() 重新编译一个组件之前，它是自己的 $scope，但它不在 angular2 中。您可以在运行时编译一个新组件，这是一个很好的 SO，有几种方法，dynamicComponentLoader：Equivalent of $compile in Angular 2

还有一个：Angular 2 equivalent of ng-bind-html, $sce.trustAsHTML(), and $compile?

我的问题是切换指令的用例是什么？我想不出为什么我会，但我很好奇你的需求是什么。对于大多数事情，ngIf、ngSwitch 等在切换时为我工作。