Angular：自定义结构指令不起作用答案

【问题标题】：Angular: Custom structural directive doesn't workAngular：自定义结构指令不起作用
【发布时间】：2019-04-01 12:55:07
【问题描述】：

作为 Angular 教程的一部分，我尝试创建自定义结构指令。

Google 和 stackoverflow 搜索都无法提供解决此问题所需的信息。

代码如下：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { environment } from 'src/environments/environment.prod';

@Directive({
  selector: '[appRole]'
})
export class RoleDirective {
  private role: string;
  private hasView = false;

  get appRole() {
    return this.role;
  }

  @Input()
  set appRole(value: string) {
    this.role = value;
    const access = this.hasRolePermission( value );
    if ( access && !this.hasView) {
      this.viewContainer.createEmbeddedView( this.template );
      this.hasView = true;
    } else if ( access && !this.hasView ) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }

  constructor(
    private template: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

    hasRolePermission( role: string ): boolean {
      return role === environment.role;
    }
}

指令在相应的模块中导出：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RoleDirective } from './role.directive';

@NgModule({
  declarations: [RoleDirective],
  imports: [
    CommonModule
  ],
  exports: [RoleDirective]
})
export class UserModule { }

下面使用的模板：

<header>
  <h1 appHover="red">Benutzer</h1>
</header>

<main>
  <app-user-list [ngStyle]="style">
  </app-user-list>
  <button *appRole="admin">Administration</button>
  <button *appRole="user">Benutzer</button>
</main>

<footer>
  <ng-container [ngSwitch]="company">
    <img *ngSwitchCase="'omega'" src="../assets/img/logo.jpg" alt="logo">
    <img *ngSwitchCase="'alphaAndOmega'" src="../assets/img/alphaAndOmega.jpg" alt="logo">
    <img *ngSwitchDefault src="../assets/img/angularLogo.png" alt="angular">
  </ng-container>

  <img *ngIf="showOmega; else elseBlock" src="../assets/img/logo.jpg" alt="logo">
  <button id="logo" (click)="toggleLogo()">
    Zeige Logo "Alpha and Omega"
  </button>

  <ng-template #elseBlock>
    <img src="../assets/img/alphaAndOmega.jpg" alt="logo">
  </ng-template>
</footer>

<router-outlet></router-outlet>

在aot编译期间我收到一条错误消息，该属性不存在类型：

ERROR in src\app\app.component.html(8,11): : Property 'admin' does not exist on type 'AppComponent'.
src\app\app.component.html(9,11): : Property 'user' does not exist on type 'AppComponent'.

任何有关如何解决此问题的帮助或指示将不胜感激。

诚挚的问候，帕特里克

【问题讨论】：

你能分享一下你的app.component.ts的代码吗？似乎没有变量 admin 或 user
文件“environment.prod.ts”定义了角色。我使用“--configuration production”编译代码。代码如下：export const environment = { production: true, role: ' admin' };
*appRole="admin"。要么在 AppComponent 中声明 admin，要么传递字符串 *appRole="'admin'"，因为您在指令 @Input() set appRole(value: string) 中请求字符串
不幸的是，该指令没有按预期工作。我现在传递了一个字符串（<button *appRole="'admin'">Administration</button>），但按钮仍然没有呈现。
你的意思是这样的：stackblitz.com/edit/angular-yht4oy ?

标签： angular

【解决方案1】：

由于您将字符串传递给 appRole 指令，因此您需要引用它 - 否则，它会寻找该名称的属性来提供值。

试试

<button *appRole="'admin'">Administration</button>

【讨论】：

也感谢您的反馈。它现在按预期工作。