介绍
每个 Angular 模块都有一个声明数组，您可以在其中注册 Angular 组件、指令和管道。在本指南中，您将了解如何使用声明数组注册组件、指令或管道，以及注册这些工件意味着什么。
@Component装饰器需要来自@NgModule装饰器的信息，该装饰器声明组件以生成组件定义。组件的选择器由声明组件的模块确定，并在组件模板的编译期间使用。出于这些原因，需要有关组件的全局信息，以便组件的相同选择器不会妨碍其他模块组件的编译。
声明数组
声明数组用于将组件、指令和管道声明到它们所属的模块中。每个组件、指令和管道都通过此声明了解其他组件、指令和管道。如果没有此声明，组件将无法使用指令和管道。
例如，假设您有一个组件，用于在 pluralsight.com 等网站上呈现技术事件，并且您希望使用名为toUpper的管道以大写形式呈现技术事件名称。仅当在声明数组中声明了管道toUpper时，此组件才能够使用管道。同样，仅当两个组件都在声明数组中声明时，组件才能够使用另一个组件作为其子组件，并且仅当指令在声明数组中声明时，组件才能够使用指令。
入门
先决条件
要完成本指南，您必须具备以下条件：
- 节点-12.17.0
- Angular CLI——9.0.2
- Visual Studio Code - 1.45.1
创建 Angular 项目
- 执行以下命令创建一个 Angular 项目。
ng 新声明-演示
- 当提示向应用程序添加路由时，按N。
- 当提示选择样式表格式时，按ENTER。
在 Visual Studio Code 中打开生成的应用程序
- 单击顶部菜单栏中的文件菜单，然后选择菜单选项打开文件夹。
- 在文件对话框中，导航到生成应用程序的文件夹。
- 在此文件夹中，您应该看到一个名为的文件夹声明-demo。选择此文件夹并在文件对话框中单击打开。
设置项目
下一步是安装 Twitter Bootstrap 和 jQuery，并在项目中引用它们，这样您就可以使用一些表单样式来使表单看起来不错。
- 转到命令提示符并运行以下命令：
cd 声明-演示
- 运行以下命令安装jquery：
npm 我 jquery
- 运行以下命令安装 Bootstrap：
npm 我 bootstrap
- 在 Visual Studio Code 中，打开文件angular.json。
- 在src/style.css之前的样式数组中添加以下行。
“node_modules/bootstrap/dist/css/bootstrap.min.css”，
- 在脚本数组中添加以下几行：
“node_modules/jquery/dist/jquery.min.js”，“node_modules/bootstrap/dist/js/bootstrap.min.js”
- 在 Visual Studio Code 中，打开文件src > index.html。
- 在 body 元素的第 10 行，添加以下类：
类=“容器”
最终的代码看起来应该是这样的：
<body class="container">
<app-root></app-root>
</body>
现在项目已设置完毕，将开始开发演示应用程序。
创建组件
在 Visual Studio Code 中，展开src文件夹。
右键单击应用程序文件夹并选择菜单选项新建文件夹。
将新文件夹命名为demo。
右键单击演示文件夹并选择菜单选项新建文件。
将新文件命名为demo.component.ts。
复制以下代码并将其粘贴到文件demo.component.ts中。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html'
})
export class DemoComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
右键单击演示文件夹并选择菜单选项新建文件。
将新文件命名为demo.component.html。
复制以下代码并将其粘贴到文件demo.component.html中。
<h1>demo works!</h1>
使用组件
在 Visual Studio Code 中，打开文件src > app > app.component.html，删除现有内容，并添加以下代码。
<app-demo></app-demo>
此代码确保App组件将尝试加载和处理演示组件并在其 HTML 模板内呈现生成的 HTML。
在监视模式下运行 Angular Dev Server
- 在命令提示符中运行以下命令，以监视模式启动 Angular Development Server：
服务
如果提示分享 Angular CLI 使用数据，请按N键表示不分享。
请注意，您会收到以下错误：
src/app/app.component.html:1:1 中出现错误 - 错误 NG8001: 'app-demo' 不是已知元素
此错误意味着 Angular 无法将该元素识别为组件。因此，您必须在App模块的声明数组中注册此组件，以便 Angular 将此元素识别为组件。
在声明数组中注册组件
在 Visual Studio Code 中，打开文件src > app > app.module.ts。
在@NgModule装饰器的声明中，添加 DemoComponent 。最终代码应如下所示：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DemoComponent } from './demo/demo.component';
@NgModule({
declarations: [
AppComponent,
DemoComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
测试修复
请注意，命令提示符中的编译错误已消失。
在 Web 浏览器中打开以下 URL：
https://本地主机:4200
- 现在您应该可以看到组件在浏览器中正常呈现。
结论
恭喜你！你已经学会了如何在任意模块的声明数组中注册组件。有关更多信息，请参阅NgModules。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
