确定对特定选择器 Angular 指令的操作

Question

我试图在 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}';

如何访问使用的选择器。或者有没有更好的方法来看待它。

Answer 1

您可以再添加一个可选的输入参数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>

您还可以使用继承来增强解决方案。

希望对你有帮助！！