- Under the new crisis-center app directory folder / directory
- New routes and components using the command
// in the new directory crisis-center routing component ng Module1 crisis-center G / crisis-center --module --flat --routing // in a directory service like the new command may be a component or <directory name ng g component > / <name> @ ; component crisis-center G ng / crisis-center i.e. new crisis-center in the crisis-center assembly directory: e.g. // for this method may also be used to enter the terminal directory corresponding create cd src / App / crisis- Center ng G the Component Crisis business-center tennis
- Current directory tree structure (service may be created by two ng g service crisis-center / <name>)
- Before configuring route, front view of the first modification module; crisis-center.component to herein as a main component, the parent / i.e. the top of the module, so that insert a placeholder in the crisis-center.component.html;
-
<h2> crisis center </ H2> <Router-Outlet> </ Router-Outlet>
- Components have been created, the routing module has also been created; the next step is to configure routing
-
{} from NgModule Import '@ Angular / Core' ; Import {the Routes, from RouterModule} '@ Angular / Router' ; Import CrisisCenterComponent {} from './crisis-center/crisis-center.component' ; Import} from {CrisisCenterHomeComponent './crisis-center-home/crisis-center-home.component' ; Import CrisisDetailComponent {} from './crisis-detail/crisis-detail.component' ; Import CrisisListComponent {} from './crisis-list/crisis -list.component ' ; // CrisisCenterComponent main assembly of the module, i.e., as a parent routing, defined by the sub-route Children // appreciated: localhost:4200 / crisis-center path parent components, the components corresponding to CrisisCenterComponent @localhost: 4200 / crisis-center / '' in the display subassembly CrisisListComponent the router-outlet // localhost: 4200 / crisis-center / '' / '' of the sub-route CrisisListComponent i.e., corresponding to CrisisCenterHomeComponent // localhost: 4200 / Crisis -center / '' / 1 CrisisListComponent i.e. sub-route, the corresponding CrisisDetailComponent // because the top, a path beginning with / applied to the root, and the sub-route is extended on the basis of the routing path on the parent, // so routing each step of the tree depth, it is necessary to add a routing path in the / symbol, back to keep the corresponding path; // if it is empty, without the addition / symbols; // so in order to navigate to the above CrisisCenterHomeComponent, is localhost: 4200 / crisis-center ( '' before the symbol / is omitted) // navigate to a CrisisDetailComponent, localhost: 4200 / Crisis-Center /. 1 const crisisCenterRoutes: = the 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 { }
- After the routing configuration is complete, the module is introduced into the AppModule;
- The official text; is to copy the files in the directory to crisis hero, i.e. both the view and the assembly method is the same; but is still white pit; posted so here Code:
- The routing configuration can know when the air route, the point CrisisListComponent assembly;
-
<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(); }) ); } }
- cirisis-detail组件视图
-
<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 }); // 相对路由跳转; } }
- crisis.service
-
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)) ); } }
- 主要用到现在两个组件,CrisisCenterHomeComponent 组件是在为空的情况下显示;有图可以方便理解;