NgModule 中的声明、提供者和导入有什么区别？

原文:https://www . geeksforgeeks . org/什么是声明-提供者-导入-in-ngmodule/

让我们首先讨论一下这些术语:

  • 声明:
    • 声明用于声明属于当前模块的组件、指令、管道。
    • 声明内部的一切都是相互了解的。
    • 声明用于使当前模块中的指令(包括组件和管道)对当前模块中的其他指令可用。
    • 指令、组件或管道的选择器只有在声明或导入时才与 HTML 匹配。
  • 提供商:
    • 提供者用于使服务和值为依赖注入所知。
    • 它们被添加到根范围，并被注入到具有它们作为依赖项的其他服务或指令中。
  • 进口:
    • 导入使其他模块的导出申报在当前模块中可用。
    • 用于导入支持模块如 FormsModule、RouterModule、CommonModule 等。

差异:

| **声明** | **提供者** | **进口** | | Declarations are used to give instructions. | Providers are used to do services. | Import makes export declarations of other modules available in the current module. | | Used to declare components, instructions and pipes belonging to the current module. | Used to inject services required by components, instructions and pipelines into our modules. | Used to import support modules such as FormsModule and RouterModule. | | 前任。AppComponent。 | Ex。 Status service. | Ex。 Browser module. | | 在@NgModule 的 Declarations 数组中定义@NgModule({Declarations:[]，)} | 在@ ng module 的 Providers 数组中定义。@NgModule({提供者:[ ]，)} | 在导入数组中定义于@NgModule。@NgModule({进口:[]，)} |

使用三个声明、进口和提供商的示例:

本项目中使用的提供者是名为 UserService 的定制服务。

ng g s User

user.service.ts

java 描述语言

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor() { }
}

该用户服务在应用模块中用作提供商

app.module.ts

java 描述语言

// imports for the application
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
// declarations for the application
import { AppComponent } from './app.component';
// providers for the application
import { UserService } from './user.service';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

超文本标记语言

<h1>GeeksforGeeks</h1>
<ul>
    <li>imports in this app: BrowserModule,
      AppRoutingModule, HttpClientModule, FormsModule</li>
    <li>declarations in this app: AppComponent</li>
    <li>providers in this app: UserService</li>
</ul>

输出:

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/10818.html