Angular 4有条件地在同一标签上添加指令

Posted 2023-02-22

【中文标题】Angular 4有条件地在同一标签上添加指令

【英文标题】：Angular 4 add directive on same tag conditionally

【发布时间】：2020-03-15 05:26:23

【问题描述】：

我正在使用 angular 4，并且我有一个指令，我需要在我的模板上添加它来验证一些东西。但我想先评估另一个条件是否为真，然后应用该指令。现在我的代码是这样的：

<div *ngIf="groupCheck; else NoDirective" #Directive>
 <li [directive]="controlGroup"><a [routerLink]="['/account/search/', '']"
                    routerLinkActive="active">Accounts</a></li>
 <li [directive]="controlGroup"><a [routerLink]="['/orders', '']"
                    routerLinkActive="active">Orders</a></li>
 <li [directive]="DIFFERENT_GROUP"><a [routerLink]="['/report']" routerLinkActive="active">Reports</a>
                </li>
 <li [directive]="controlGroup"><a [routerLink]="['/anotherStuff']" routerLinkActive="active">anotherStuff</a></li>
</div>
<div *ngIf="!groupCheck; else Directive" #NoDirective>
 <li><a [routerLink]="['/account/search/', '']" routerLinkActive="active">Accounts</a></li>
 <li><a [routerLink]="['/orders', '']" routerLinkActive="active">Orders</a></li>
 <li><a [routerLink]="['/report']" routerLinkActive="active">Reports</a></li>
 <li><a [routerLink]="['/anotherStuff']" routerLinkActive="active">anotherStuff</a></li>
</div>

我想找到一种方法来做这样的事情：

<li *NgIf="condition true add [directive]=controlGroup; else Don't add directive to this line/tag/element"><a [routerLink]="['/account/search/', '']"
                    routerLinkActive="active">Accounts</a></li>
 <li *NgIf="condition true add [directive]=controlGroup; else Don't add directive to this line/tag/element"><a [routerLink]="['/orders', '']"
                    routerLinkActive="active">Orders</a></li>
 <li *NgIf="condition true add [directive]=DIFFERENTGROUP; else Don't add directive to this line/tag/element"><a [routerLink]="['/report']" routerLinkActive="active">Reports</a>
                </li>
 <li *NgIf="condition true add [directive]=controlGroup; else Don't add directive to this line/tag/element"><a [routerLink]="['/anotherStuff']" routerLinkActive="active">anotherStuff</a></li>

这样我就不必只为一个条件重写整个代码，也不需要条件 div。有没有办法做到这一点？

--******更新******-- @Allabakash 从帖子中为我提供了一个可能的解决方案：

<button [attr.md-raised-button]="condition ? '' : null"></button>

我现在的问题是，如果我的指令（我无法访问）为 null 或方法中没有出现的名称，它会消除整个元素。以下是它的工作原理：

set checkGroup(hasGroups: string) 
    if (hasGroups) 
      this.AuthService.hasOtherGroups(hasGroups, false).subscribe(res => 
        if (!res) 
          this.el.nativeElement.parentNode.removeChild(this.el.nativeElement);
         else 
          this.el.nativeElement.style.display = '';
        
      );
     else 
      this.el.nativeElement.parentNode.removeChild(this.el.nativeElement);
    
  

这给我留下了大问题：有没有办法可以在

中使用这个指令和条件 让我在元素上应用指令，如果结果为 null 不要让指令应用，这样我就可以避免重复整个菜单？

感谢您的宝贵时间 :)。

【问题讨论】：

你可以看看这个。 ***.com/questions/44597077/…

我在找什么，谢谢。问题是我需要使用的该死指令。如果我传递一个空值，它会删除整个元素。这就是指令的工作方式，我无法更改它。我将用指令的工作原理更新问题。

【参考方案1】：

2 种可能性：

您可以将条件放入指令中（将数据传递给指令）

使用 ngIf 创建两个元素：

<div *ngIf="false"></div> <div *ngIf="true" myDirective></div>

【讨论】：

这就是我所做的，问题是我是否可以在一行中进行验证，如果条件为假，则不要使用该指令，您提出的解决方案使我编写了两倍的代码:( .

是的，我认为最好将逻辑放入指令中

【参考方案2】：

创建您的custom structural directive，将您的参数传递给它并执行您想要在其中执行的任何逻辑...即...

@Directive( selector: '[myDirective]' )
export class MyDirective implements OnInit 
    private _config;

    @Input()
    set myDirective(config) 
        this._config = config
    

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ) 

    ngOnInit() 
        if (this._config) 
            this.viewContainer.clear()
         else 
            this.viewContainer.createEmbeddedView(this.templateRef);
        
    

这只是一个示例，但您可以根据任何事件执行任何操作，:，即输入更改。可观察的发射等...

以与 ngIf 应用相同的方式应用结构指令...

<ng-container *myDirective="config"></ng-container>

【讨论】：

你的意思是我必须创建和使用另一个指令，而不是使用已经创建的[指令]？因为如果是这种情况，我将无法使用它。我必须使用已创建的 [directive]（公司术语 yei #not）。所以问题基本上是：我是否可以对该 LI 使用一些条件来验证公司指令是否返回 null 但避免在不更改公司指令的情况下删除元素的 removeChild ？这个想法是用这个想法减少代码，如果没有办法，那我就这样吧。