Agular4 路由

Angular Route 导航

  1. Routes:路由配置,保存着哪个Url对应展示哪个组件,以及在哪个TouterOutlet中展示组件。
  2. RouteOutlet: 在Html中标记路由内容呈现位置的占位符指令。
  3. Router:负责在运行时执行路由的对象,可以通过调用器navigate()和navigateByUrl()方法来导航到一个指定的路由。
  4. RouterLink 在Html中声明路由导航用的指令。
  5. ActivatedRoute当前激活的路由对象,保存着当前路由的信息,如路由地址、路由参数等。

路由配置

src\app\app-routing.module.ts

const routes: Routes = [
  //路由为空时的指向
  {path: '', componet: HomeComponet}
  //将localhost:4200/home 路由指向HomeConpnent组件
  {path: 'home', component: HomeComponent},
  //将未匹配到的路由指向Code404Componet组件
  {path: '**', component: Code404Component},
];

插座

src\app\app.component.html

<router-outlet></router-outlet>

用来指示组件显示的位置

routerLink

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a>

路由跳转

src\app\app-routing.module.ts

<input type="button" value="商品详情" (click)="toProductDetails()">

src\app\app.component.ts

//拿Router对象
constructor(private router: Router) {

}
//导航到目录路由
toProductDetails() {
  this.router.navigate(['/product']);
}

在路由时传递数据

在查询参数中传递数据

src\app\app.component.html

<a [routerLink]="['/product']" [queryParams]="{id: 1}">商品详情</a>

src\app\product\product.component.ts

//存储传递过来的ID
private productId: number;

//获得参数信息
constructor(private routeInfo: ActivatedRoute) { }

ngOnInit() {
  this.productId = this.routeInfo.snapshot.params['id'];
}

在路由路径中传递数据

src\app\app-routing.module.ts

const routes: Routes = [
  {path: 'product/:id', component: ProductComponent},
];

src\app\app.component.html

<a [routerLink]="['/product', 2]">商品详情</a>

src\app\product\product.component.ts

参数快照方式获取:(不从新调用ngOnInit方法)

this.productId = this.routeInfo.snapshot.params['id'];

参数订阅方式获取

this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);

在路由配置中传递数据

重定向路由

src\app\app-routing.module.ts

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
];

子路由

src\app\app-routing.module.ts

const routes: Routes = [
  {path: 'product/:id', component: ProductComponent, children: [
    {path: '', component: ProductDescComponent},
    {path: 'seller/:id', component: SellerInfoComponent},
  ]},
];

src\app\product\product.component.html

注意前边的”.”

<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller', 99]">卖家信息</a>
<router-outlet></router-outlet>

辅助路由

声明一个带有name属性的插座

src\app\app.component.html

<router-outlet name="aux"></router-outlet>

在路由配置里边配置aux这个插座上可以显示哪些组件

src\app\app-routing.module.ts

{path: 'chat', component: ChatComponent, outlet: 'aux'},

指定路由跳转时主插座显示哪个组件,辅助插座上显示哪个组件

跳转到指定组件显示辅助路由中的组件

<a [routerLink]="[{outlets: {primary: 'aux', aux: 'chat'}}]">开始聊天</a>

不跳转主路由

<a [routerLink]="[{outlets: {aux: 'chat'}}]">开始聊天</a>

路由守卫(钩子)

  1. CanActivate:处理导航到某个路由的情况
  2. CanDeactivate:处理从当前路由离开的情况
  3. resolve:在路由激活之前获得路由所需数据

CanActivate 

新建文件和文件夹

  • src\app\guard
  • src\app\guard\login.guard.ts
import {CanActivate} from '@angular/router';

export class LoginGuard implements CanActivate {

  canActivate() {

    let loggedIn: boolean = Math.random() < 0.5;

    if (!loggedIn) {
      console.log('用户未登录');
    }

    return loggedIn;
  }

}

src\app\app-routing.module.ts

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'chat', component: ChatComponent, outlet: 'aux'},
  {path: 'product/:id', component: ProductComponent, children: [
    {path: '', component: ProductDescComponent},
    {path: 'seller/:id', component: SellerInfoComponent},
  ], canActivate: [LoginGuard]},
  {path: '**', component: Code404Component},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard]
})

CanDeactivate

src\app\guard\unsaved.guard.ts

import {CanDeactivate} from '@angular/router';
import {ProductComponent} from '../product/product.component';

export class UnsavedGuard implements CanDeactivate<ProductComponent> {
  canDeactivate(component: ProductComponent) {
    return window.confirm('您好未保存,确定要离开么?');
  }
}

src\app\app-routing.module.ts

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'chat', component: ChatComponent, outlet: 'aux'},
  {path: 'product/:id', component: ProductComponent, children: [
    {path: '', component: ProductDescComponent},
    {path: 'seller/:id', component: SellerInfoComponent},
  ], canActivate: [LoginGuard], canDeactivate: [UnsavedGuard]},
  {path: '**', component: Code404Component},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard, UnsavedGuard]
})

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注