在指令 Angular2-4 中乘以提供者答案

【问题标题】：Multiply providers in directives Angular2-4在指令 Angular2-4 中乘以提供者
【发布时间】：2017-05-12 10:59:03
【问题描述】：

如何将两个 * 应用于字符串。我有下一个代码

<a class="sidenav-anchor" *ngIf="!item.hasSubItems()" md-list-item md-ripple [routerLink]="[item.route]" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<md-icon>{{ item.icon }}</md-icon>
<span class="sidenav-item-name fade-in-on-icon-sidenav">{{ item.name }}</span><span fxFlex><!-- fill space --></span>
<span class="badge fade-in-on-icon-sidenav" *ngIf="item.badge" [style.background-color]="item.badgeColor">{{ item.badge }}</span>
</a>

我需要申请*showAuthed="false" to <a>

显示验证码

import {
  Directive,
  Input,
  OnInit,
  TemplateRef,
  ViewContainerRef
} from '@angular/core';

import { UserService } from './services/user.service';

@Directive({ selector: '[showAuthed]' })
export class ShowAuthedDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private userService: UserService,
    private viewContainer: ViewContainerRef
  ) {}

  condition: boolean;

  ngOnInit() {
    this.userService.isAuthenticated.subscribe(
      (isAuthenticated) => {
        if (isAuthenticated && this.condition || !isAuthenticated && !this.condition) {
          this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
          this.viewContainer.clear();
        }
      }
    )
  }

  @Input() set showAuthed(condition: boolean) {
    this.condition = condition;
  }

}

来自https://github.com/gothinkster/angular-realworld-example-app 的代码和来自http://preview.themeforest.net/item/fury-angular-2-material-design-admin-template/full_screen_preview/19325966?_ga=2.3033968.178803556.1494586718-118953069.1493279302 的侧边栏

【问题讨论】：

有什么问题？ “都*到字符串”是什么意思？您不能将两个结构指令添加到同一个元素。
还有什么方法可以使用指令？
您可以使用<ng-container *foo="..."><div *bar></div></ng-container> 来解决此限制。 <ng-container> 不会被添加到 DOM 中。

标签： angular typescript angular2-template angular2-directives

【解决方案1】：

这样检查：

// <ng-template> for ng4
<template [showAuthed]="false">
<a class="sidenav-anchor" *ngIf="!item.hasSubItems()" md-list-item md-ripple [routerLink]="[item.route]" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<md-icon>{{ item.icon }}</md-icon>
<span class="sidenav-item-name fade-in-on-icon-sidenav">{{ item.name }}</span><span fxFlex><!-- fill space --></span>
<span class="badge fade-in-on-icon-sidenav" *ngIf="item.badge" [style.background-color]="item.badgeColor">{{ item.badge }}</span>
</a>
</template>

【讨论】：