如何在 Angular 2 指令中使用 templateUrl

Posted 2023-02-22

【中文标题】如何在 Angular 2 指令中使用 templateUrl

【英文标题】：How to use templateUrl in Angular 2 directive

【发布时间】：2017-10-28 09:48:48

【问题描述】：

如何将 html 模板添加到指令中？这是一个不起作用的示例代码：

从'@angular/core'导入指令；

@Directive( 选择器：'[master-side-bar]', 模板网址： 'master-side-bar.html' )

导出类 MasterSideBar

构造函数()

console.log('Hello MasterSideBar Directive');   

我收到以下错误：

' selector: string; 类型的参数模板网址：字符串； ' 不是 可分配给“指令”类型的参数。对象字面量只能 指定已知属性，并且类型中不存在“templateUrl” '指令'。

【参考方案1】：

从您的代码中，您需要使用 组件 而不是指令。

Component 是唯一接受模板为 HTML 的指令。

请查看Types of directives

希望对你有帮助！！

【讨论】：

感谢您指出组件。我改为使用组件，它起作用了。

【参考方案2】：

根据 Angular 文档，有两种类型的指令：属性和结构。它们都不支持模板。只需使用角度组件。您是否有充分的理由一定要使用指令？

【讨论】：

感谢您指出组件。我对 Angular 2 很陌生。我改为使用组件，它工作正常。