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

Posted 2023-03-06

【中文标题】确定对特定选择器 Angular 指令的操作

【英文标题】：Determining Action on a Specific Selector Angular Directives

【发布时间】：2020-03-16 20:15:18

【问题描述】：

我试图在 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】：

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

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

希望对你有帮助！！

【讨论】：

我将如何引用该类。因此，如果我希望选择器成为 my-label-circle，我不希望元素具有我想要的类，以便能够有条件地添加基于所选类的内容。希望这是有道理的！谢谢！

我更新了答案，希望对您有所帮助，如果对您有帮助，请接受。谢谢。