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) {
  ...
}

Angular 6结构指令

1 个答案: