在 Angular 中使用声明数组声明模块拥有的内容

2020-07-23 08:00:00 · 飞浪

介绍每个Angular模块都有一个声明数组，您可以在其中注册Angular组件、指令和管道。在本指南中，您将了解如何使用声明数组注册组件、指令或管道，以及注册这些工件意味着什么。 @C

介绍

每个 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。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 Angular 中使用声明数组声明模块拥有的内容

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-demo', templateUrl: './demo.component.html' }) export class DemoComponent implements OnInit { constructor() { } ngOnInit(): void { } }

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 { }