angular7中没有向指令传递值[重复]答案

【问题标题】：no pass value to directive in angular7 [duplicate]angular7中没有向指令传递值[重复]
【发布时间】：2019-10-25 15:22:55
【问题描述】：

我在 Angular7 中创建了一个 Directive，但是当我需要将一个 string 值从 html 传递到指令时。

但是当我在 HTML 中使用它时：

<ng-template [appValidatePermission]='CreateRole'>
   <router-outlet></router-outlet>
</ng-template>

这是我的指令：

    @Directive({
  selector: '[appValidatePermission]'
})
export class ValidatePermissionDirective implements OnInit {

  show: boolean;
  constructor(private templateRef: TemplateRef<any>,
              private viewContainerRef: ViewContainerRef
    ,         private dynamic: DynamicPermissionService) { }

  // tslint:disable-next-line:no-input-rename
  @Input() AccessName: string;

  ngOnInit() {
    this.ValidatePemission();
    if (this.show) {
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainerRef.clear();
    }
  }
  ValidatePemission() {
    console.log('AccessName : ', this.AccessName);
    const find = this.dynamic.dynamicModel.find(x =>
      !! x.actionsVM.find(z => z.actionEnglishName === this.AccessName));
    if (find) {
        this.show = true;
      } else {
         this.show = false;
      }
  }
}

它告诉我AccessName: Undefined。

有什么问题？？？我该如何解决？？？

【问题讨论】：

请参考stackoverflow.com/questions/38843532/…
@CharybdeBE 谢谢你。它工作
@Kianoush 欢迎您，如果它解决了您的问题，请考虑接受我的回答

标签： javascript angular typescript angular7 angular-directive

【解决方案1】：

您没有传递变量。要使用指令，请在 HTML 中这样做

  <ng-template appValidatePermission AccessName="CreateRole">
   <router-outlet></router-outlet>
   </ng-template>

请注意，如果您使用[] 并想输入您应该做的搅拌

  <ng-template appValidatePermission [AccessName]="'CreateRole'">
   <router-outlet></router-outlet>
   </ng-template>

【讨论】：

【解决方案2】：

你可以这样试试

<ng-template [AccessName]="<value you want to send>" appValidatePermission >
   <router-outlet></router-outlet>
</ng-template>

【讨论】：