Angular 未设置角度指令输入_Angular_Typescript_Angularjs Directive

Angular 未设置角度指令输入

angular typescript

Angular 未设置角度指令输入,angular,typescript,angularjs-directive,Angular,Typescript,Angularjs Directive,我只是在这里找不到这个问题该指令： @Directive({ selector: '[appListData]' }) export class ListDataDirective implements OnInit { @Input('data') data: object; @Input('layout') layout: string; templateUrl: string; constructor(private el: ElementRef) { }

我只是在这里找不到这个问题

该指令：

@Directive({
  selector: '[appListData]'
})
export class ListDataDirective implements OnInit {

  @Input('data') data: object;
  @Input('layout') layout: string;

  templateUrl: string;

  constructor(private el: ElementRef) { }

  ngOnInit(): void {

    console.log(JSON.stringify(this.data));
    console.log(this.layout);

    this.templateUrl = 'list-data-layouts/list.html';

    if (this.layout === 'grid') {
      this.templateUrl = 'list-data-layouts/grid.html';
    } else if (this.layout === 'list') {
      this.templateUrl = 'list-data-layouts/list.html';
    }

  }
}

模板

<div appListData [data]=employees [layout]="grid"></div>

日志输出：布局未定义-为什么

我也不知道如何在我的分区加载外部模板文件。谢谢

编辑

根据建议，执行以下操作将打印出两个输入，我将继续使用第二个输入@nkuma_12 answer解释了如何在组件的类中查找有意义的网格属性，因为最终会有一个按钮更改布局变量

<div appListData [data]=employees layout="grid"></div> 
<div appListData [data]=employees [layout]="'grid'"></div>

我一直在阅读关于结构指令的文档，但没有任何帮助。

因为您正在使用

  @Input('layout') layout: string;

在指令中

当传递输入时，我看到您正在传递

[layout]=“grid”>

，这使得它在使用它的组件中查找grid变量，并得到

未定义的

您应该以单引号传递值网格：

[layout]=“'grid'”>

此外，数据输入值应使用双引号：

[data]=“employees”

。请查看文档以了解更多详细信息。