未设置角度指令输入答案

【问题标题】：Angular Directive input is not being set未设置角度指令输入
【发布时间】：2019-05-06 05:31:31
【问题描述】：

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

指令：

@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>

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

我也不确定如何在我的 div 中加载外部模板文件。谢谢。

编辑

根据建议，执行以下操作会打印出两个输入，我将继续使用第二个。 @nkuma_12 的答案解释了它是如何在组件的类中寻找 grid 属性的——因为最终会有一个按钮来更改布局变量。

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

我一直在阅读有关结构指令的文档 - 没有任何帮助。 https://angular.io/guide/structural-directives#write-a-structural-directive

【问题讨论】：

而不是[layout]="grid" 尝试layout="grid"，因为您分配的是字符串而不是属性。
我认为所有的 templateUrl 都是相对于你的应用程序的根目录，所以我认为这行不通。

标签： angular typescript angularjs-directive

【解决方案1】：

因为你正在使用

  @Input('layout') layout: string;

在指令中。

当传递输入时，我看到你传递了[layout]="grid"></div>，这使它在你使用它的组件中查找网格变量并获取undefined。

您应该在单引号中传递值网格：[layout]="'grid'"></div>

您的数据输入值也应该用双引号括起来：[data]="employees"。有关详细信息，请查看文档。

【讨论】：