Angular 结构指令被破坏

Question

我正在尝试使用 Angular 5.2.9 创建网站。我正在构建一个登录系统，现在想避免在用户未获得授权时将元素加载到页面中。

路由是一回事，我可以使用 canActivate 并将 AuthGuard 放在那里，但对于特定元素（如菜单项、页面元素），我想控制用户是否看到它们。所以，我想我会创建一个结构指令。

我将示例代码直接从 Angular Documentation 复制到我的应用程序中。打字时出现错误；

Property binding appUnless not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

我在 app.module.ts 内的声明中引用了指令。我确定我错过了一些东西，但我不太确定是什么。我已经环顾四周和其他地方了。

Answer 1

我从下面的 angular documentation 复制并粘贴 app.module.ts 文件。

您忘记将 declarations: [UnlessDirective] 添加到您的项目中。这就是您收到错误的原因。 UnlessDirective 应替换为您的指令名称。

import { NgModule }      from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }         from './app.component';
import { heroSwitchComponents } from './hero-switch.components';
import { UnlessDirective }    from './unless.directive';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [
    AppComponent,
    heroSwitchComponents,
    UnlessDirective
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Angular 结构指令被破坏

Angular Structural Directive Broken

angular-directive

angular