实现路由
Posted lxhjh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现路由相关的知识，希望对你有一定的参考价值。
目录
一、建立chapter01模块
ng g m chapter01
angular/cli建立文件src\\app\\chapter1\\chapter01.module.ts
注：1、各个章节，独立一个模块。
2、各个章节，在一个文件夹里面，方便查找。
二、建立第一章所需组件
1、介绍
ng g c chapter01/chapter01Introduce -m chapter01
2、各个小结
ng g c chapter01/chapter0101 -m chapter01
ng g c chapter01/chapter0102 -m chapter01
ng g c chapter01/chapter0103 -m chapter01
ng g c chapter01/chapter0104 -m chapter01
ng g c chapter01/chapter0105 -m chapter01
ng g c chapter01/chapter0106 -m chapter01
ng g c chapter01/chapter0107 -m chapter01
ng g c chapter01/chapter0108 -m chapter01
ng g c chapter01/chapter0109 -m chapter01
ng g c chapter01/chapter0110 -m chapter01
三、实现第一章的路由
1、修改chapter01模块
定义子路由、导出它包括的组件，修改后的文件(src\\app\\chapter01\\chapter01.module.ts)如下
import NgModule from '@angular/core';
import CommonModule from '@angular/common';
import Chapter01IntroduceComponent from './chapter01-introduce/chapter01-introduce.component';
import Chapter0101Component from './chapter0101/chapter0101.component';
import Chapter0102Component from './chapter0102/chapter0102.component';
import Chapter0103Component from './chapter0103/chapter0103.component';
import Chapter0104Component from './chapter0104/chapter0104.component';
import Chapter0105Component from './chapter0105/chapter0105.component';
import Chapter0106Component from './chapter0106/chapter0106.component';
import Chapter0107Component from './chapter0107/chapter0107.component';
import Chapter0108Component from './chapter0108/chapter0108.component';
import Chapter0109Component from './chapter0109/chapter0109.component';
import Chapter0110Component from './chapter0110/chapter0110.component';
import RouterModule from '@angular/router';
let routing = RouterModule.forChild([
path: "introduce", component: Chapter01IntroduceComponent,
path: "01", component: Chapter0101Component,
path: "02", component: Chapter0102Component,
path: "03", component: Chapter0103Component,
path: "04", component: Chapter0104Component,
path: "05", component: Chapter0105Component,
path: "06", component: Chapter0106Component,
path: "07", component: Chapter0107Component,
path: "08", component: Chapter0108Component,
path: "09", component: Chapter0109Component,
path: "10", component: Chapter0110Component,
path: "**", redirectTo: "introduce"
]);
@NgModule(
declarations: [
Chapter01IntroduceComponent,
Chapter0101Component,
Chapter0102Component,
Chapter0103Component,
Chapter0104Component,
Chapter0105Component,
Chapter0106Component,
Chapter0107Component,
Chapter0108Component,
Chapter0109Component,
Chapter0110Component
],
imports: [
routing, CommonModule
],
exports:[
Chapter01IntroduceComponent,
Chapter0101Component,
Chapter0102Component,
Chapter0103Component,
Chapter0104Component,
Chapter0105Component,
Chapter0106Component,
Chapter0107Component,
Chapter0108Component,
Chapter0109Component,
Chapter0110Component
]
)
export class Chapter01Module
2、修改根模块
导入chapter01模块,修改后的文件(src\\app\\app.module.ts)如下
import NgModule from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import AppRoutingModule from './app-routing.module';
import AppComponent from './app.component';
import Chapter01Module from './chapter01/chapter01.module';
import ModelModule from './model/model.module';
@NgModule(
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ModelModule,
Chapter01Module
],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
3、修改根路由
定义根路由，动态加载第一章模块，修改后的文件(src\\app\\app-routing.module.ts)如下
import NgModule from '@angular/core';
import RouterModule, Routes from '@angular/router';
const routes: Routes = [
path:"chapter01",
loadChildren:()=>import("./chapter01/chapter01.module")
.then(m=>m.Chapter01Module)
,
path: "**", redirectTo: "/chapter01"
];
@NgModule(
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
)
export class AppRoutingModule
4、修改根组件的html
在路由占坑位置写入<router-outlet></router-outlet>,修改后的文件(src\\app\\app.component.html)如下
<div class="container-fluid">
<div class="row bg-light main">
<div class="col-3 d-flex flex-column p-3 scrollable">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<span class="fs-6">CSS3艺术:网页设计案例实战</span>
</a>
<ul class="list-unstyled ps-0">
<li class="mb-1" *ngFor="let chapter of chapters;let i=index">
<a class="btn btn-toggle" data-bs-toggle="collapse"
href="#chapterchapter.id-collapse" aria-expanded="false">
chapter.title
</a>
<div class="collapse" id="chapterchapter.id-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li *ngFor="let section of chapter.sections">
<a href="#" class="link-dark rounded">section.title</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-9 card">
<div class="card-header">头部</div>
<div class="card-body">
<router-outlet></router-outlet>
</div>
<div class="card-footer">底部</div>
</div>
</div>
</div>
至此，第一章各个章节的占位以及路由实现。
四、导航与路由关联
1、修改Chapter类，增加链接字段
修改后文件(src\\app\\model\\chapter.model.ts)如下
import Section from "./section.model";
export class Chapter
constructor(
public id: number,
public title: string,
public link: string,
public sections:Section[]
)
2、修改数据源
2.1、章的构造数据增加链接字段。
2.2、小结的数据，写入链接字段的值。
修改之后文件(static.data.source.ts)如下
import Injectable from "@angular/core";
import from, Observable from "rxjs";
import Chapter from "./chapter.model";
import Section from "./section.model";
@Injectable()
export class StaticDataSource
private chapters:Chapter[]=[
new Chapter(1,"第1章 CSS基础知识","chapter01/introduce",[
new Section(1,"1.1 CSS简介","chapter01/01"),
new Section(2,"1.2 在页面中应用CSS","chapter01/02"),
new Section(3,"1.3 常用CSS属性一览","chapter01/03"),
new Section(4,"1.4 选择器","chapter01/04"),
new Section(5,"1.5 单位","chapter01/05"),
new Section(6,"1.6 盒模型","chapter01/06"),
new Section(7,"1.7 定位","chapter01/07"),
new Section(8,"1.8 布局","chapter01/08"),
new Section(9,"1.9 重叠","chapter01/09"),
new Section(10,"1.10 继承和引用","chapter01/10")
]),
new Chapter(2,"第2章 伪元素","",[
new Section(1,"2.1 ::before和::after伪元素",""),
new Section(2,"2.2 content属性",""),
new Section(3,"2.3 灵活使用伪元素",""),
new Section(4,"2.4 项目应用","")
]),
......
3、修改根组件的ts，注入路由以及增加导航函数
修改之后的文件(src\\app\\app.component.ts)如下
import Component from '@angular/core';
import Router from '@angular/router';
import Chapter from './model/chapter.model';
import StaticDataSource from './model/static.data.source';
@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
)
export class AppComponent
public chapters: Chapter[] = [];
constructor(private dataSource: StaticDataSource,
private router: Router)
this.dataSource.getChapters().subscribe(data =>
this.chapters = data;
console.log(this.chapters);
)
navLinkClick(link:string)
this.router.navigateByUrl(link);
4、修改根组件的html,导航关联路由
4.1、<a>元素通过routerLink属性的绑定，可以实现路由关联。
4.2、bootstrap的.collapse组件的枝干中的<a>元素的href被占用，故不能用routerLink属性绑定，只有通过点击事件用代码实现导航。
修改之后的文件(src\\app\\app.component.html)如下
<div class="container-fluid">
<div class="row bg-light main">
<div class="col-3 d-flex flex-column p-3 scrollable">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<span class="fs-6">CSS3艺术:网页设计案例实战</span>
</a>
<ul class="list-unstyled ps-0">
<li class="mb-1" *ngFor="let chapter of chapters;let i=index">
<a class="btn btn-toggle" data-bs-toggle="collapse"
href="#chapterchapter.id-collapse" aria-expanded="false" (click)="navLinkClick(chapter.link)">
chapter.title
</a>
<div class="collapse" id="chapterchapter.id-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li *ngFor="let section of chapter.sections">
<a class="link-dark rounded" [routerLink]="section.link">section.title</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-9 card">
<div class="card-header">头部</div>
<div class="card-body">
<router-outlet></router-outlet>
</div>
<div class="card-footer">底部</div>
</div>
</div>
</div>
以上是关于实现路由的主要内容，如果未能解决你的问题，请参考以下文章
从用户的角度使用 predicateEditor 定义子谓词的最佳方法