前端之家

  1. 首页
  2. 问答

Angular 4 add指令有条件地在相同标签上

• 问答

我使用的是角度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，不让指令适用，所以我可以避免重复整个菜单？

    感谢您的时间：）。

    • microwebhk 回答：Angular 4 add指令有条件地在相同标签上

    2种可能性：

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

    • 使用ngIf创建两个元素：

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

    ,

    创建您的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>
    angularangular-ng-ifdirectivetypescript
    本文链接：https://www.f2er.com/3071954.html

    大家都在问