在 Angular 中，我们可以使用内联模板来定义组件的模板。内联模板是指将模板直接写在组件的元数据中，而不是在单独的 HTML 文件中。
为什么要使用内联模板？
使用内联模板有以下几个好处：
- 更方便：内联模板让我们能够更轻松地编辑组件模板，因为我们不再需要切换不同的文件。
- 更容易维护：将组件和其模板放在同一个文件中，可以使代码更易于理解和维护。
- 更高效：内联模板通常比外部模板更快加载，因为它们可以与组件一起被预编译。
如何使用内联模板？
Angular 提供了两种方法来使用内联模板：
- 使用 `template` 属性
- 使用 `templateUrl` 属性
使用 template 属性
我们可以通过在组件元数据中设置 `template` 属性来定义内联模板。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -
---------- -----------
------- -- -- --------------
--
--
------ ----- ----------- --在这个例子中，我们定义了一个简单的内联模板，其中包含一个标题和一个段落。
使用 templateUrl 属性
如果我们的内联模板变得更加复杂，我们可能会希望将其移动到一个单独的文件中。为此，我们可以使用 `templateUrl` 属性指定文件路径，如下所示：
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {}在这个例子中，我们将模板放在了一个名为 `my-component.component.html` 的文件中，并使用 `templateUrl` 属性指定了它的路径。
内联模板的指令和表达式
与外部模板一样，内联模板也支持 Angular 的指令和表达式。例如，在内联模板中使用 `*ngIf` 指令：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -
---- --------------------
---------- -----------
------- -- -- --------------
------
--
--
------ ----- ----------- -
----------- - -----
-在这个例子中，我们使用了 `*ngIf` 指令来根据组件中的条件变量 `showContent` 来显示或隐藏一段 HTML 内容。
总结
使用内联模板是一个方便、高效和易于维护的方法来定义 Angular 组件的模板。我们可以通过 `template` 或 `templateUrl` 属性来指定内联模板，并在其中使用 Angular 的指令和表达式来构建复杂的 UI。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25197