// 在crisis-center目录下新建路由组件 ng g module crisis-center/crisis-center --module --flat --routing // 在某目录下新建组件或服务等命令可为 ng g component <目录名>/<name> //例如： ng g component crisis-center/crisis-center 即在crisis-center目录下新建crisis-center 组件； // 该方法还可以是，使用终端进入到相对应的目录下进行创建 cd src/app/crisis-center ng g component crisis-center
<h2>
危机中心
</h2>
<router-outlet></router-outlet>
import { NgModule } from ‘@angular/core‘;
import { Routes, RouterModule } from ‘@angular/router‘;
import { CrisisCenterComponent } from ‘./crisis-center/crisis-center.component‘;
import { CrisisCenterHomeComponent } from ‘./crisis-center-home/crisis-center-home.component‘;
import { CrisisDetailComponent } from ‘./crisis-detail/crisis-detail.component‘;
import { CrisisListComponent } from ‘./crisis-list/crisis-list.component‘;
// CrisisCenterComponent 为模块主组件， 即作为父路由，通过children 来 定义子路由
// 理解：localhost:4200/crisis-center 为父组件路径，对应 CrisisCenterComponent组件
// localhost:4200/crisis-center/‘’ 将在router-outlet中显示 子组件 CrisisListComponent
// localhost:4200/crisis-center/‘’/‘‘ 即CrisisListComponent 的子路由 ，对应 CrisisCenterHomeComponent
// localhost:4200/crisis-center/‘’/1 即CrisisListComponent 的子路由 ，对应 CrisisDetailComponent
// 因为在顶级，以/开头的路径指向应用的根，而子路由是在父路由路径的基础上的扩展，
// 所以在路由树每深入一步，就要在该路由路径上添加一个/符号，后面跟上相对应的路径；
// 如果是空，则不添加/符号；
// 所以上面要想导航到CrisisCenterHomeComponent，就是localhost:4200/crisis-center （‘‘ 符号前/ 被省略）
// 而导航到CrisisDetailComponent，localhost:4200/crisis-center/1
const crisisCenterRoutes: Routes = [
{
path: ‘crisis-center‘, component: CrisisCenterComponent, children: [
{ path: ‘‘, component: CrisisListComponent, children: [
{ path: ‘:id‘, component: CrisisDetailComponent},
{ path: ‘‘, component: CrisisCenterHomeComponent}
]}
]
}
];
@NgModule({
imports: [RouterModule.forChild(crisisCenterRoutes)],
exports: [RouterModule]
})
export class CrisisCenterRoutingModule { }
<ul class="crises"> <li *ngFor="let crisis of crises$ | async" [class.selected]="crisis.id === selectedId"> <a [routerLink]="[crisis.id]"> <span class="badge">{{ crisis.id }}</span>{{ crisis.name }} </a> </li> </ul> <!-- 子路由视图占位 --> <router-outlet></router-outlet>
import { Component, OnInit } from ‘@angular/core‘;
import { ActivatedRoute } from ‘@angular/router‘;
import { CrisisService } from ‘../crisis.service‘;
import { Crisis } from ‘../crisis‘;
import { Observable } from ‘rxjs‘;
import { switchMap } from ‘rxjs/operators‘;
@Component({
selector: ‘app-crisis-list‘,
templateUrl: ‘./crisis-list.component.html‘,
styleUrls: [‘./crisis-list.component.css‘]
})
export class CrisisListComponent implements OnInit {
crises$: Observable<Crisis[]>;
selectedId: number;
constructor(
private service: CrisisService,
private route: ActivatedRoute
) { }
ngOnInit() {
this.crises$ = this.route.paramMap.pipe(
switchMap(params => {
this.selectedId = +params.get(‘id‘);
return this.service.getCrises();
})
);
}
}
<h2>crisisES</h2> <div *ngIf="crisis$ | async as crisis"> <h3>"{{ crisis.name }}"</h3> <div> <label>Id: </label>{{ crisis.id }}</div> <div> <label>Name: </label> <input [(ngModel)]="crisis.name" placeholder="name"/> </div> <p> <button (click)="gotoCrises(crisis)">Back</button> </p> </div>
import { switchMap } from ‘rxjs/operators‘;
import { Component, OnInit, Input } from ‘@angular/core‘;
import { Router, ActivatedRoute, ParamMap } from ‘@angular/router‘; // 导入类
import { Observable } from ‘rxjs‘;
import { Crisis } from ‘../crisis‘;
import { CrisisService } from ‘../crisis.service‘;
@Component({
selector: ‘app-crisis-detail‘,
templateUrl: ‘./crisis-detail.component.html‘,
styleUrls: [‘./crisis-detail.component.css‘]
})
export class CrisisDetailComponent implements OnInit {
crisis$: Observable<Crisis>; //声明
// 服务注入
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private crisisService: CrisisService
) { }
ngOnInit() {
// ActivatedRoute服务来处理路由的路径和参数；这里接收路由参数ID，获取关联数据
// paramMap; 一个Observable, 包含当前路由的必要参数和可选参数组成的map对象；当这个map值变化，可以使用get(name)获取id参数；然后crisisService获取相关id对应的数据并返回；
// switchMap(); 可以取消以前未完成的请求，即发起新ID获取请求时，而service还在接收之前id对应的数据时，switchMap 可以放弃老请求而返回新id 的请求数据；
this.crisis$ = this.activatedRoute.paramMap.pipe(
switchMap((params: ParamMap) =>
this.crisisService.getCrisis(params.get(‘id‘)))
);
}
// 使用相对路径导航，需要提供当前的ActivatedRoute,让路由器知道当前处于路由树的位置
// 使用： 链接参数数组后，添加relativeTo属性，并设置为当前的ActivatedRoute
gotoCrises(crisis: Crisis) {
let crisisId = crisis ? crisis.id : null;
this.router.navigate([‘../‘, { id: crisisId, foo: ‘foo‘ }], { relativeTo: this.activatedRoute }); // 相对路由跳转；
}
}
import { BehaviorSubject, Observable, of } from ‘rxjs‘;
import { map } from ‘rxjs/operators‘;
import { Injectable } from ‘@angular/core‘;
import { MessageService } from ‘../message.service‘;
import { Crisis } from ‘./crisis‘;
import { CRISES } from ‘./mock-crises‘;
@Injectable({
providedIn: ‘root‘,
})
export class CrisisService {
constructor(private messageService: MessageService) { }
getCrises(): Observable<Crisis[]> { // 获取列表数据
// TODO: send the message _after_ fetching the heroes
return of(CRISES);
}
getCrisis(id: number | string) {
return this.getCrises().pipe(
map(crises => crises.find(crisis => crisis.id === +id))
);
}
}
原文：https://www.cnblogs.com/gushiyoyo/p/11265590.html