Angular：组件、模块、路由

Angular主要由这三块组成，又或者一切都是围绕“组件”的概念展开

组件——模块

• 组件就是HTML和CSS以及TS的封装

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
})
export class AppComponent {
  // TS逻辑代码
}

• 一个组件只能被一个Module所导入，大于一个就会报错。declarations[组件]，imports[模块]，providers[服务（依赖注入）]

@NgModule({
  declarations: [AppComponent, LoginComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    IconsProviderModule,
    NgZorroAntdModule,
    // welcome组件相关
    WelcomeModule,
    WelcomeRoutingModule,
  ],
  providers: [
    LoginAuthGuard,
    CookieService,
    ApiService,
    { provide: NZ_I18N, useValue: zh_CN },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

• 要想同一个组件被多次复用，就得使用模块进行包装

/**
 * 公共组件统一模块出口
 */

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgZorroAntdModule } from 'src/ant-design-source/ng-zorro-antd.module';
import { ButtonComponent } from './button/button.component';
import { ModalComponent } from './modal/modal.component';
@NgModule({
  imports: [CommonModule, NgZorroAntdModule],
  declarations: [ButtonComponent, ModalComponent],
  exports: [ButtonComponent, ModalComponent], // 导出所用的组件
})
export class ComponentsModule {}

导入模块就可以直接使用

import { NgModule } from '@angular/core';
// 只能有一个根module
import { CommonModule } from '@angular/common';
import { NgZorroAntdModule } from '../../../ant-design-source/ng-zorro-antd.module';
import { WorkplaceComponent } from './workplace.component';
import { ComponentsModule } from 'src/app/components/components.module';
@NgModule({
  imports: [CommonModule, NgZorroAntdModule, ComponentsModule],
  declarations: [WorkplaceComponent],
  exports: [WorkplaceComponent],
})
export class WorkplaceModule {}

组件——路由

直接导入匹配组件

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome.component';
import { Monitor } from './monitor/monitor.component';
import { WorkplaceComponent } from './workplace/workplace.component';
import { FormComponent } from './form/form.component';
import { TableComponent } from './table/table.component';
const routes: Routes = [
  {
    // 注意这里的path
    path: '',
    component: WelcomeComponent,
    children: [
      { path: 'monitor', component: Monitor },
      { path: 'workplace', component: WorkplaceComponent },
      { path: 'form', component: FormComponent },
      { path: 'table', component: TableComponent },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class WelcomeRoutingModule {}

模块——路由

当使用路由懒加载时就需要导入模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { LoginAuthGuard } from './guards/login-auth.guard';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/login' },
  { path: 'login', component: LoginComponent },
  {
    path: 'welcome',
    canActivate: [LoginAuthGuard],
    /* 使用懒加载该组件模块 */
    loadChildren: () =>
      import('./pages/welcome.module').then((m) => m.WelcomeModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

后面有补充的待更新...