确定特定选择器角度指令的动作

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>

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

希望它将对您有帮助！