如何在Angular中动态添加属性？

Question

我有一个指令，我想用它来向输入字段动态添加属性。哪个有效，它将正确的属性添加到输入字段。但是该属性的指令不起作用。所以我想我需要编译它，在新的 Angular 中没有编译。

所以我用了Renderer2，还是不行

动态添加属性的指令：

import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[addAttributes]'
})

export class addAttributesDirective implements OnInit {
    @Input() attributes: any;
    constructor(private renderer: Renderer2, private el: ElementRef) {}

    ngOnInit() {
        this.addAttributes();
    }
    
    addAttributes() {
        const mapping: any = {
            FieldUppercase: 'uppercase'
        };

        this.attributes.forEach((attr: any) => {
            const attribute = mapping[attr];
            if (attribute) {
                this.renderer.setAttribute(this.el.nativeElement, attribute, 'true');
            }
        });
        
        this.el.nativeElement.removeAttribute('addAttributes');
    }
}

所以当我使用：

<input type="text"
      [name]="id"
      [id]="id"
      class="form-control"
      [ngModel]="value"
      [attributes]="attributes"
      addAttributes />

它在输入字段中添加了 uppercase="true"，这是正确的。

但是大写指令不起作用。

指令大写：

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

@Directive({
  selector: '[uppercase]'
})

export class UppercaseDirective implements OnInit {
    @Input() attributes: any;
    
    constructor(private el: ElementRef) {
    }

    ngOnInit() {
        console.log('uppercase'); 
    }
}

通常我需要在控制台日志中看到 uppercase，但这不起作用。我做错了什么？

我不能在某些情况下使用管道，所以想这样做。

Answer 1

似乎没有办法在运行时使用 addAttribute 动态执行此操作。我认为您可以做的是使用布尔输入将所有指令添加到您的元素，然后有条件地启用或禁用它们。 (Stackblitz).

例如-

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
    
@Directive({
  selector: '[uppercase]'
})

export class UppercaseDirective implements OnInit {
    @Input() uppercaseattributes: any;
    @Input() uppercase: boolean;
    
    constructor(private el: ElementRef) {
    }

    ngOnInit() {
        if (this.uppercase)
        {
            /// ===> DO STUFF
            console.log('uppercase'); 
        }
    }
}

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

@Directive({
  selector: '[lowercase]'
})

export class LowercaseDirective implements OnInit {
    @Input() lowercaseattributes: any;
    @Input() lowercase: boolean;
    
    constructor(private el: ElementRef) {
    }

    ngOnInit() {
        if (this.lowercase)
        {
            /// ===> DO STUFF
            console.log('lowercase'); 
        }
    }
}

import { Component, VERSION } from '@angular/core';
    
@Component({
  selector: 'my-app',
  template: `<hello name="{{ name }}"></hello>
              <p (click)="onClick()" 
                  [uppercase]="enableUpperCase" 
                  [lowercase]="enableLowerCase">
                  Start editing to see some magic happen :)
              </p>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  enableUpperCase: boolean = false;
  enableLowerCase: boolean = true;

  onClick() { 
      this.enableUpperCase = !this.enableUpperCase; 
      this.enableLowerCase = !this.enableLowerCase; 
  }
}

如何在Angular中动态添加属性？

How to add attribute dynamically in Angular?

angular-directive

angular-pipe

angular