当前位置： 正文

Angular认识模块与组件的概念与区别

前端技术 2021-04-19

前言

我们都知道一个应用通常会有多个(Module)组成。而我们又会在一个下写多个，让我们了解一些模块与的基本构造吧。

让大家对Angular的模块和组件有一个清晰的认识！

模块

中的模块共有9个配置部分。其中最常用的有4部分为私有资源列表、公有资源列表、协作模块列表以及扩展功能列表。

Angular认识模块与组件的概念与区别

如图所示，我们以appModule为例逐一介绍一下。

import {BrowserModule} from '@angular/platform-browser';  
import {NgModule} from '@angular/core'; 

import {AppRoutingModule} from './app-routing.module'; 
import {AppComponent} from './app.component'; 

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

我们使用@NgModule声明其为一个模块，同时@NgModule里的内容为此模块的基本信息。

  1. declarations：私有资源列表，我们在这里那些属于本模块的组件，指令和管道。
  2. exports：导出表，我们在这里声明哪些可以被其他模块使用，如果我们这里没有内容，即使我们在别的模块import这个模块，也无法使用这个模块下面的组件。
  3. imports：此为协作模块类表，我们可以理解为我们请其他模块来帮忙，其实我们是请其他模块地下的一个或多个组件来帮忙，但是为了防止重复，我们直接请组件所在模块帮忙。
  4. providers：扩展功能列表，这里提供本模块所需要的Service，
  5. bootstrap：定义启动组件。这个配置项也可以是一个数组，也就是说可以指定做个组件作为启动点，但是这种用法是很罕见的。我们通常只在appmodule中使用。

其中我们简单来理解一下providers和exports。如果我们需要显示某组件而初始化某组件，我们就使用imports，如果我们需要使用其组件方法，我们就使用providers提供。简单来说，如果v层需要组件，我们就使用imports提供，如果c层需要组件，我们就使用providers提供，这里我们无法直接提供组件，我们通过提供某某controller间接提供组件。

组件

同模块一样，组件通过@Component来声明为他是一个组件。

@Component({

selector: 'app-student-index',

templateUrl: './student-index.component.html',

styleUrls: \['./student-index.component.sass'\]

})

1.selector：是一个 CSS 选择器，它会告诉 Angular，一旦在 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。
2.templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。 另外，你还可以用template属性的值来提供内联的 HTML 模板。
3.styleUrls：该组件的cass文件相对于这个文件的地址。你也可以用styles属性的值来提供内联css。
如果我们想在c层请其他组件帮忙，我们在构造函数中声明

constructor(private studentService: StudentService,

private userService: UserService,

private appComponent: AppComponent,

private router: Router) {

}

angular会帮我们自动注入。
我们将所有的service都放到一个文件夹里。但是我们没有放到一个module，这是涉及到摇树优化的问题。具体不再多说

总结

组件：把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用）

模块：分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，独立管理，每个模块有很多接口，可供调用

组件化模块化优点：开发调试效率高、可维护性强、避免阻断、版本管理更容易

赏