Angular 6結構指令

Question

我已經嘗試過使用Angular 6盡可能簡單的結構化指令。 我創建了一個項目，然后生成了一個新指令。 該指令已添加到@NgModule的dedecations部分。 將指令添加到app.component.html的中，但我不斷

無法綁定到“ appHasPermission”，因為它不是“ div”的已知屬性。 （“>>] * appHasPermission =” good“>

app.component.html

 <div *appHasPermission="good"> <h1>Hello</h1> </div> 

指示

 import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core'; @Directive({ selector: '[appHasPermission]' }) export class HasPermissionDirective { @Input() set permissionName(name: any) { this.viewContainerRef.createEmbeddedView(this.templateRef); } constructor(private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) { } } 

和模塊

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HasPermissionDirective } from './has-permission.directive'; @NgModule({ declarations: [ AppComponent, HasPermissionDirective ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

我看過教程和視頻，它們正是我所做的。 它必須是顯而易見的。 有任何想法嗎？

Answer 1

您可以通過幾種方法來解決問題：

1）更改@Input名稱：

@Input() set appHasPermission(name: any) {
  ...
}

2）定義@Input別名：

@Input('appHasPermission') set permissionName(name: any) {
  ...
}