Angular实际项目路由使用:Component-less routes结合loadChildren实现方式（一）

最新推荐文章于 2024-02-19 07:00:00 发布

朱迪33

最新推荐文章于 2024-02-19 07:00:00 发布

阅读量2k

点赞数 1

分类专栏： angular router 文章标签： angular router loadChildren

本文链接：https://blog.csdn.net/weixin_41210256/article/details/90172570

版权

angular 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

router

1 篇文章 0 订阅

订阅专栏

先看一下项目结构

项目结构如何主要看公司团队，同一个团队的项目结构也有不同，在实践中尝试、进步。

另外一个项目结构，按照模块划分

→ → → 实际步骤开始：Component-less routes同loadChildren同时使用

安装 Angular Router

yarn add @angular/router
# OR
npm i --save @angular/router

index.html中添加<base>标签

路由需要根据这个来确定应用程序的根目录

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>xxxxxx</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>
</body>
</html>

以上配置信息告诉 Angular 路由，应用程序的根目录是 /

使用路由

1、在 `AppModule` 模块中，导入 `RouterModule`

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

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

2、使用`RouterModule` 对象为我们提供了两个静态的方法：`forRoot()` 和 `forChild()` 来配置路由信息

RouterModule.forRoot() 方法用于在主模块中定义主要的路由信息，通过调用该方法使得我们的主模块可以访问路由模块中定义的所有指令。

// app.routers.ts
import { Routes, RouterModule } from '@angular/router';
import {NgModule} from '@angular/core';
import {ProtectedGuard, PublicGuard} from 'ngx-auth';

const _routes= [
    {
        path: 'login',
        loadChildren: './modules/user-login/user-login.module#userLoginModule',,
        canActivate: [PublicGuard]
    },
    {
        path: '',
        // 告诉路由从另一个模块中获取子路由:需要导入模块的相对路径、# 分隔符、导出模块类的名称
        loadChildren: './modules/project-list/project-list.module#ProjectListModule',
        canActivate: [ProtectedGuard]
    },
    {path: '**', redirectTo: '', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(_routes)]
})
export class RoutingModule {}

RouterModule.forChild() 与 Router.forRoot() 方法类似，但它只能应用在子模块中,建议根模块中使用 forRoot()，子模块中使用 forChild()

// 某子模块xxx.component.ts
import {RouterModule, Routes} from '@angular/router';
import {NgModule} from '@angular/core';
import {ProjectListComponent} from './project-list.component';
import {ProjectListBodyComponent} from './project-list-body/project-list-body.component';
import {PluginDownloadComponent} from '../project-common/plugin-download/plugin-download.component';

const _routes: Routes = [
  {
    path: '',
    component: ProjectListComponent,
    children: [
      {
        path: '',component: ProjectListBodyComponent,
      },
      {
        path: 'pluginDownload', component: PluginDownloadComponent,
      }
    ]
  }
];

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

备注：在主模块和特性模块中，路由配置对象的类型是一样的，区别只是主模块和子模块中需调用不同的方法，来配置模块路由

3、加载路由：<router-outlet>相当于一个占位符，当 Angular 路由匹配到响应路径，并成功找到需要加载的组件时，它将动态创建对应的组件，并将其作为兄弟元素，插入到 `router-outlet` 元素之后。

建立应用程序的主路由

// app.module.ts

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

import {AppComponent} from './app.component';
import {RoutingModule} from './app.routers';
import {RouterModule} from '@angular/router';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {CookieService} from 'ngx-cookie-service';


@NgModule({
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    RouterModule,
    RoutingModule
  ],
  declarations: [
    AppComponent,
  ],
  providers: [
    CookieService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

// app.component.html
<router-outlet></router-outlet>

建立应用程序的子路由

// project-list.module.ts
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {RoutingModule} from './project-list.routers';
import {ProjectListComponent} from './project-list/project-list.component';
import {ProjectListHeaderComponent} from './project-list-header/project-list-header.component';
import { ProjectListBodyComponent } from './project-list-body/project-list-body.component';
import {PluginDownloadComponent} from '../project-common/plugin-download/plugin-download.component';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,       // 使用ngModel
    ReactiveFormsModule, // 使用formGroup
    RouterModule, // 缺少则无法使用routerLink标签
    RoutingModule
  ],
  providers: [],
  declarations: [
    ProjectListComponent,
    ProjectListHeaderComponent,
    ProjectListBodyComponent ,
    PluginDownloadComponent
  ]
})
export class ProjectListModule {
}

// project-list.component.html
<app-project-list-header class="fixToTop"></app-project-list-header>

<div class="projectListContainer" >
  <router-outlet></router-outlet>
</div>

一个完整的路由功能就完成了，登录后显示的第一个页面就是ProjectListBodyComponent的内容，路由为localhost:8080

参考信息：Angular 4.x 路由快速入门(可查看完整版)

朱迪33

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Angular实际项目路由使用:Component-less routes结合loadChildren实现方式（一）

先看一下项目结构项目结构如何主要看公司团队，同一个团队的项目结构也有不同，在实践中尝试、进步。另外一个项目结构，按照模块划分→ → → 实际步骤开始：Component-less routes同loadChildren同时使用安装 Angular Routeryarn add @angular/router# ORnpm i --save @an...
复制链接

扫一扫