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

Posted 2023-05-07

【中文标题】Angular 2 有条件地添加属性指令

【英文标题】：Angular 2 conditionally add attribute directives

【发布时间】：2016-09-26 03:56:29

【问题描述】：

我在这里看到了两个问题，如何有条件地添加和删除项目的属性 (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)

【参考方案1】：

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

【讨论】：

有什么办法可以强制 Angular 以某种方式重新编译该元素以应用它？或者有什么不同的方法可以做到这一点？我现在不需要它，但我只是好奇

据我所知。您可以做的是添加一个带有指令选择器的元素和一个不带有指令选择器的元素，并使用ngIf 来切换应该从 DOM 中添加/删除哪个元素。

@GünterZöchbauer 你能看看我的问题，也许你有想法***.com/questions/37489029/…

对不起，我不知道 AngularJS，只有 Angular2

@GünterZöchbauer 不支持如此重要的功能的原因是什么。 ngIf 对我来说不是一个解决方案。 :(

【参考方案2】：

您可以将标志传递给指令

在指令中：

ngAfterViewInit()

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

在 DOM 中：

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

【参考方案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;
    

        

 

【参考方案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 等在切换时为我工作。

【讨论】：

这是我的用例：我正在使用 Bootstrap。我为文本输入创建了一个组件，这样我就不必为文本输入创建包装器 div (.form-group) 和标签，而是可以只为每个文本输入使用一行，将标签作为 @ 传递987654325@ 到组件。我还创建了 CurrencyDirective 以将输入格式化为货币。现在我希望能够在我的一个文本输入上设置该指令，但我必须将一个标志传递到文本输入组件中，以指示该指令是否应添加到组件中的 <input /> 元素中。