Как динамически добавить атрибут в Angular? - PullRequest
Новая
       11

Как динамически добавить атрибут в Angular?

0 голосов
/ 10 июля 2020

У меня есть директива, которую я хочу использовать для динамического добавления атрибутов в поля ввода. Что работает, он добавляет правильный атрибут в поле ввода. Но директива для этого атрибута не работает. Поэтому я думаю, что мне нужно его скомпилировать, в новом 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 в журнале консоли, но это не работает. Что я делаю не так?

Я не могу использовать каналы в определенных ситуациях, поэтому хочу сделать это вот так.

1 Ответ

0 голосов
/ 13 июля 2020

Кажется, не существует способа сделать это динамически во время выполнения с использованием 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; 
  }
}
...