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

Question

我正在使用 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 不要让指令应用，这样我就可以避免重复整个菜单？

感谢您的宝贵时间 :)。

Answer 1

2 种可能性：

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

• 使用 ngIf 创建两个元素：

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

Answer 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>