介绍
在本指南中，我们将了解内联和外部模板。在 Angular 中，我们的视图在 HTML 模板中定义，可以是内联的，也可以是外部的。我们将逐一介绍这些模板。
使用内联模板查看
首先，我们将学习如何使用内联模板显示主视图。在本节中，我们将从头开始创建一个组件，而不使用任何 Angular 命令。
在 app 文件夹中创建一个单独的文件夹。在 components 文件夹中，我们将为我们的应用程序创建一个名为“demo”的新文件夹，因为它是一个演示应用程序，并创建一个名为demo.component.ts的Typescript文件。
在演示文件夹中，我们将按照某些步骤来制作组件。这些步骤如下所示：
- 在 demo/demo.component.ts 中创建导出的类文件
- 添加@Component装饰器
- 在 app.module.ts 中添加类名
- 使用选择器、模板和样式配置@Component装饰器
- 将选择器以标签形式添加到app.component.ts中
在 demo/demo.component.ts 中创建导出的类文件
创建可以导出到其他地方使用的类。它看起来像下面的代码片段。
export class DemoComponent {}
您可以为您的组件赋予任意名称。
添加@Component 装饰器
在类名顶部添加@Component装饰器@angular/core 。
@Component({})
export class DemoComponent {}
成功制作组件后，我们需要将其注册到app.module.ts文件中。
在 app.module.ts 中添加类名
我们将在@NgModule装饰器的声明数组中添加我们的类名。
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { DemoComponent } from "./components/demo/demo.component";
@NgModule({
declarations: [DemoComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
现在我们需要设置我们的@Component装饰器并添加一些 HTML、CSS 以及最重要的选择器。
配置@Component 装饰器
我们将在app.component.html中添加选择器，使其在视图中可见，并添加一些 HTML 内容，以便使用某种样式测试我们的组件。选择器名称可以是任何名称。这取决于你。我将在模板中添加“Hello World”，并在样式中添加文本颜色。最终组件将如下所示：
import { Component } from "@angular/core";
@Component({
selector: "app-demo-component",
template: `
<strong>Hello World</strong>
`,
styles: [
`
strong {
color: red;
}
`
]
})
export class DemoComponent {}
template属性包含我们的 HTML，styles属性包含样式数组。
将选择器添加到 app.component.ts
现在我们将选择器添加到app.component.ts以将我们的视图添加到 DOM 中并使其可见。
<app-demo-component></app-demo-component>
我们的组件现在可以部署了。在 CMD/终端上运行ng serve命令并检查输出。
如您所见，我们的输出与预期输出完全匹配。我们已经完成了内联模板的使用，您已经掌握了它。但是这种模式有一个限制。假设我们有一千行 HTML 和 CSS 代码。在这种情况下，它会变得奇怪且难以处理。这就是为什么我们总是更喜欢外部模板和外部 CSS。
在下一节中，我将带您了解外部模板和 CSS。
使用外部模板查看
要添加外部模板和样式，我们需要在 demo 文件夹中创建另外两个文件：一个 HTML 文件和一个 CSS 文件。我将它们命名为 demo.component.html 和 demo.component.css。我遵循 Angular 最佳实践和命名约定；您可以选择任何您喜欢的名称。
然后我们将 template 属性的代码移到demo.component.html中。
<strong>Hello World</strong>
接下来，移动demo.component.css中的样式属性代码
strong {
color: red;
}
最后，更改demo.component.ts代码。
import { Component } from "@angular/core";
@Component({
selector: "app-demo-component",
templateUrl: "./demo.component.html",
styleUrls: ["./demo.component.css"]
})
export class DemoComponent {}
您可以看到之前的代码和当前代码之间存在一些差异。我们使用templateUrl代替template，并使用styleUrls代替style。
这些更改至关重要，因为 template 和templateUrl属性都表示不同类型的元数据。Angular 根据@Component装饰器中给出的元数据确定要做什么。style、styles 和styleUrls也是如此。
现在你可以看到没有任何区别的输出。
结论
了解何时在 Angular 中使用外部和内联模板至关重要。通过本指南，我希望您已经了解了每个模板的使用方式和时间。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
