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

Question

我在这里看到两个问题如何有条件地添加和删除项目的属性（Is it possible to conditionally display element attributes using Angular2?），但我的问题是是否可以添加和删除属性指令 ？我能够添加和删除属性，但Angular不会＆＃34;编译＆＃34;属性作为属性指令，但属性只是在那里什么都不做。以下是2个标签的示例：

第一个是我试图有条件地应用属性指令而第二个有所有时间。

这是gif：

以下是我如何应用属性（可能有不同的方法来应用属性指令？）

109765 ((test)) blah blah
test

这是指令：

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

编辑：有几个答案，但它们适用于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

所以在你有一个组件重新编译它自己的$ scope与$ compile（）之前，它不在angular2中。你可以在运行时编译一个新的组件，这里有一个很好的SO，通过dynamicComponentLoader的几种方式：Equivalent of $compile in Angular 2

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

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