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

11 浏览
0 Comments

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

我在这里看到了两个关于如何在一个元素上有条件地添加和移除属性的问题（Is it possible to conditionally display element attributes using Angular2?），但我的问题是是否可以添加和移除属性指令？我能够添加和移除属性，但是Angular不会将该属性“编译”为属性指令，该属性只是存在而已，没有任何作用。这是两个标签的示例：

第一个标签是我尝试有条件地应用属性指令的标签，而第二个标签则始终具有该属性。

这是一个gif图：

enter image description here

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

Testing something

这是属性指令的代码：

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）的。

0

3 答案

0 Comments

Angular 2中有时候需要根据条件来添加属性指令，以下是一个解决方法：

在使用属性指令时，可以将一个条件作为输入传递给该指令。例如，在HTML中可以这样写：

Testing something

然后在指令中使用这个条件：

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;
    }
}

在这个例子中，`[enable]`属性将一个条件`check`传递给了`colored`指令。在指令中，通过`@Input`装饰器将这个条件声明为输入属性。然后，在`onMouseEnter`和`onMouseLeave`方法中，根据条件来执行相应的操作。

这样，当`check`为`true`时，鼠标移入时背景色会变为黄色，移出时背景色恢复为默认值。当`check`为`false`时，指令中的操作不会执行。

这种方法可以根据条件来动态地添加或移除属性指令，实现更灵活的组件行为。

0
0 Comments

Angular 2中条件添加属性指令的原因是为了根据特定条件来决定是否应用某个指令。下面是解决这个问题的方法：

在指令中传递一个标志位：

在指令中的ngAfterViewInit方法中，首先检查传递给指令的tooltip参数是否为对象，如果是对象则赋值给tooltip变量，否则创建一个包含tooltip.disabled属性的对象。然后，判断tooltip.disabled是否为真，如果为真则执行相关操作。

在DOM中使用指令：

在DOM中的span元素上使用属性绑定语法，将tooltip属性绑定为一个对象，该对象具有disabled属性，值为true。这样就可以根据条件决定是否应用指令。

下面是整理的完整文章：

在Angular 2中，我们可以根据特定条件来决定是否应用某个属性指令。下面是一种条件添加属性指令的解决方法。

方法一：传递标志位到指令中

在指令的ngAfterViewInit方法中，我们可以通过传递一个标志位来决定是否应用指令。具体实现如下：

ngAfterViewInit() {
  let tooltip = this.tooltip instanceof Object ? this.tooltip : { disabled: this.tooltip };
  if (!tooltip.disabled) {
    // 执行相关操作
  }
}

在上述代码中，我们首先检查传递给指令的tooltip参数是否为对象，如果是对象则将其赋值给tooltip变量，否则我们创建一个包含tooltip.disabled属性的对象。然后，我们判断tooltip.disabled是否为真，如果为真则执行相关操作。

方法二：在DOM中使用指令

在DOM中，我们可以使用属性绑定语法来将一个对象绑定到指令的属性上，从而实现条件添加属性指令。具体使用方法如下：

在上述代码中，我们将tooltip属性绑定为一个对象，该对象具有disabled属性，值为true。这样就可以根据条件决定是否应用指令。

以上就是在Angular 2中条件添加属性指令的原因以及解决方法。通过传递标志位到指令中或在DOM中使用指令，我们可以根据特定条件来决定是否应用某个属性指令。

0
0 Comments

Angular 2中的条件添加属性指令

在Angular 2中，不能在运行时动态地为元素添加属性指令。指令只能在静态HTML与选择器匹配时应用。

虽然不能直接实现动态添加属性指令，但我们可以通过添加一个带有指令选择器的元素和一个不带指令选择器的元素，并使用ngIf来切换哪个元素应该被添加或从DOM中移除。

这是一位开发者在Stack Overflow上提出的问题，他想知道是否有办法强制Angular重新编译元素以应用指令，或者是否有其他方法可以实现此功能。但很遗憾，没有人回答他的问题。

尽管不清楚为什么Angular 2不支持这个重要的功能，但我们可以使用上述方法来模拟出动态添加属性指令的效果。

0