Определение действия для определенных угловых директив селектора - PullRequest
Новая
       76

Определение действия для определенных угловых директив селектора

0 голосов
/ 21 ноября 2019

Я пытаюсь создать директиву с двумя селекторами в Angular 8. Логика является общей для двух типов селекторов, за исключением того, что один из селекторов должен добавить дополнительный класс css.

Вот что я пытаюсь сделать. Чтобы позвонить 

<my-label type='error'>foo</my-label>
<my-label-circle type='error'>bar</my-label-circle>

Я хотел бы повторно использовать директиву my-label, поскольку круг - это просто еще один стиль CSS для него. Хотя я не хотел бы добавлять его в мой тип ввода. 

@Directive({
selector: '[my-label], [my-label-circle]'
});
class MyLabel {
  @Input() type: LabelType = Default;
}

Функция HostBinding в классе будет просто использовать входные данные для создания элемента. Как бы я расширил эту функциональность, чтобы также использовать данный селектор? Так, например, функция HostBinding будет выглядеть как 

if(selector == 'my-label-circle')
    return 'label label-circle ${type}';
else
    return 'label ${type}';

Как получить доступ к используемому селектору. Или есть лучший способ посмотреть на это.

1 Ответ

0 голосов
/ 21 ноября 2019

Вы можете добавить еще один необязательный входной параметр Shape и с помощью Renderer2 Service можете добавить любой CSS. 

import { Directive, Renderer, ElementRef } from '@angular/core';
@Directive({
  selector: '[my-label]'
})
export class ExploreRendererDirective {
  private nativeElement : Node;
  @Input() shape: 'default'| 'circle' = 'default';
  @Input() type: LabelType = Default;

  constructor( private renderer : Renderer2, private element : ElementRef ) 
  {
    this.nativeElement = element.nativeElement;
    if (this.shape === 'circle') {
      // Add css classes for circle.
      this.renderer.setAttribute(nativeElement, 'class', 'your-class-here');  
    }

  }
}

 // for default 
 <label my-label type='error'>foo</label>

 // for circle
 <label my-label type='error' [shape]="'circle'">foo</label>

Или второе решение - создать две директивы. 

import { Directive, Renderer, ElementRef } from '@angular/core';
@Directive({
  selector: '[my-label]'
})
export class ExploreRendererDirective {
  private nativeElement : Node;
  @Input() type: LabelType = Default;

  constructor( private renderer : Renderer2, private element : ElementRef 
) 
  {
    this.nativeElement = element.nativeElement;
   }
}


import { Directive, Renderer, ElementRef } from '@angular/core';
@Directive({
  selector: '[label-circle]'
})
export class ExploreRendererDirective {
  private nativeElement : Node;
  @Input() type: LabelType = Default;

  constructor( private renderer : Renderer2, private element : ElementRef 
) 
  {
    this.nativeElement = element.nativeElement;
    // Add css classes for circle.
     this.renderer.setAttribute(nativeElement, 'class', 'your-class-here');
   }
}

// for default 
 <label my-label type='error' label-circle>foo</label>

Также вы можете использовать наследование для улучшения решения.

Надеюсь, это поможет вам !!

...