美文网首页angular
angular--路由

angular--路由

作者: 林ze宏 | 来源:发表于2017-12-27 22:38 被阅读0次

生成一个跟angular路由相关的项目:ng new router --routing;
生成组件:ng g component xx;

跟路由相关的五个对象:

image.png
五个对象在整个应用中的位置:
image.png

路由传递参数:
1:在查询参数中传递参数:

app.component.html:
 第一种通过界面:<a [routerLink]="['/product']" [queryParams]="{id:1}">商品</a> 
第二种通过typeScript:<button  type="button" (click)="toProductDetails()">商品详情</button>

第二种:app.component.ts:
toProductDetails() {
     this.router.navigate(['/product']);
  }

product.component.ts:
// 快照的方式获取参数
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Params } from '@angular/router/src/shared';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  private productId: number;
  constructor(private routerInfo: ActivatedRoute) { }

  ngOnInit() {
    // 使用订阅方式 获取路由参数的时候,不确定是否从路由本身路由到本身,则使用订阅方式
    this.routerInfo.params.subscribe((param: Params) => this.productId = param['id']);
  }

}

2:在路由路径中传递参数:

app.component.html:
 第一种通过界面: <a [routerLink]="['/product', 2]">商品</a>
第二种通过typeScript:<button  type="button" (click)="toProductDetails()">商品详情</button>

第二种:app.component.ts:
toProductDetails() {
     this.router.navigate(['/product', 3]);
  }

// 在路由中配置
app-routing.module.ts:
{path: 'product/:id', component: ProductComponent}, // 带参数传递

product.component.ts:
 // 从URL中获取参数
this.productId = this.routerInfo.snapshot.params['id'];

路由获取参数方式:
有快照和订阅两种方式,一般使用订阅

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Params } from '@angular/router/src/shared';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  private productId: number;
  constructor(private routerInfo: ActivatedRoute) { }

  ngOnInit() {
    // 快照的方式获取参数:
    // this.productId = this.routerInfo.snapshot.queryParams['id'];
    // this.productId = this.routerInfo.snapshot.params['id']; // 从URL中获取参数

    // 使用订阅方式:
    // 使用订阅方式 获取路由参数的时候,不确定是否从路由本身路由到本身,则使用订阅方式
    this.routerInfo.params.subscribe((param: Params) => this.productId = param['id']);
  }

}

路由配置:
重定向路由、找不到路径的默认路由

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { Code404Component } from './code404/code404.component';

const routes: Routes = [
  // --- 这里注意,path路径上不能有斜杠 /
  // 重定向路由
  {path: '', redirectTo: '/home', pathMatch: 'full'}, 
  {path: 'home', component: HomeComponent},
  {path: 'product/:id', component: ProductComponent}, // 带参数传递
  {path: 'home', component: HomeComponent},
  // 找不到路径的默认路由
  {path: '**', component: Code404Component}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

子路由:

在app-routing.module.ts中配置:
{path: 'product/:id', component: ProductComponent,
    children: [
      {path: '', component: ProductDetailComponent},
      {path: 'seller/:id', component: SellInfoComponent}
    ]
 },

在父界面product.component.html中的定义:
<!-- 这里注意:路径前面是有一个点的 . 表示在当前的路径下找其子路由 -->
<a [routerLink]="['./']">sell商品</a>
<a [routerLink]="['./seller', 66]">product详情商品</a>
<router-outlet></router-outlet>

辅助路由:

image.png
app.component.html:
<!-- 辅助路由 primary:'home',用来指定跳转到辅助路由的同时,跳转到主路由为home,可以不指定主路由primary-->
<a [routerLink]="[{outlets: {primary:'home' ,aux: 'chat'}}]">展示chat</a>
<a [routerLink]="[{outlets: {aux: null}}]">隐藏chat</a>
<router-outlet></router-outlet>
<!-- 在主路由router-outlet下添加一个带有name的 router-outlet-->
<router-outlet name="aux"></router-outlet>

app-routing.module.ts:
{path: 'chat', component: ChatComponent, outlet: 'aux'},

路由守卫:
CanActivate:处理导航到某路由的情况,满足某种情况才可以进入指定路由。
CanDeactivate:处理从当前路由离开的情况,只有满足某种情况,才能离开当前路由。
Resolve:在路由激活之前获取路由数据。

app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { Code404Component } from './code404/code404.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { SellInfoComponent } from './sell-info/sell-info.component';
import { ChatComponent } from './chat/chat.component';
import { LoginGuard } from './guard/login.guard';
import { UnsaveGuard } from './guard/unsave.guard';
import { ProductResolve } from './guard/product.resolve';

const routes: Routes = [
  // 这里注意,path路径上不能有斜杠 /
  {path: '', redirectTo: '/home', pathMatch: 'full'}, // 重定向路由
  {path: 'home', component: HomeComponent},
  {path: 'chat', component: ChatComponent, outlet: 'aux'},
  {path: 'product/:id', component: ProductComponent,
    children: [
      {path: '', component: ProductDetailComponent},
      {path: 'seller/:id', component: SellInfoComponent}
    ],
    canActivate: [LoginGuard],
    canDeactivate: [UnsaveGuard],
    resolve: {
      product: ProductResolve
    }
},
  {path: 'home', component: HomeComponent},
  {path: '**', component: Code404Component}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard, UnsaveGuard, ProductResolve]
})
export class AppRoutingModule { }

-----------------------------------------------------------

login.guard.ts:canActivate
import { CanActivate } from '@angular/router';
export class LoginGuard implements CanActivate {
    canActivate() {
        const loggedIn: boolean = Math.random() < 0.5;
        if (!loggedIn) {
            console.log('用户未登录');
        }
        return loggedIn; // 返回true的时候
    }
}

-----------------------------------------------------------

unsave.guard.ts:CanDeactivate 
import { CanDeactivate } from '@angular/router/src/interfaces';
import { ProductComponent } from '../product/product.component';
// 针对要离开ProductComponent这个路由,则做处理
export class UnsaveGuard implements CanDeactivate< ProductComponent> {
    canDeactivate(component: ProductComponent) {
        return window.confirm('确定要离开么?');
    }
}

-----------------------------------------------------------

product.resolve.ts:Resolve 
import { Resolve } from '@angular/router/src/interfaces';
import { Product } from '../product/product.component';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Router } from '@angular/router';
import { Injectable } from '@angular/core';

@Injectable()
export class ProductResolve implements Resolve<Product> {
    constructor(private router: Router) {
    }
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const productId: string = route.params['id'];
        if (productId === '2') {
            return new Product(2, 'ssss');
        }else {
            this.router.navigate(['/home']);
        }
    }
}

-----------------------------------------------------------

product.component.ts:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Params } from '@angular/router/src/shared';
@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  private productId: number;
  private productName: string;
  constructor(private routerInfo: ActivatedRoute) { }

  ngOnInit() {
   // 使用另外一种获取参数的方式,data
    this.routerInfo.data.subscribe((data: {product: Product}) => {
      this.productId = data.product.id;
      this.productName = data.product.name;
    });
  }
}
export class Product {
  constructor(public id: number, public name: string) {}
}

相关文章

  • angular--路由

    生成一个跟angular路由相关的项目:ng new router --routing;生成组件:ng g com...

  • angular--路由之子路由

    子路由应用场景是在一个组件A里有两个链接,分别显示不同的子组件b和c,这两个子组件的位置在A组件中。 举例子: 比...

  • angular--路由之辅助路由

    辅助路由案例的思路: 1、在APP组件模板上再定一个插座来显示在线咨询组件 2、单独开发一个在线咨询组件,只显示在...

  • angular--数据绑定

    数据绑定几种语法: 事件绑定: 属性绑定和插值绑定是一样的: HTML属性和DOM属性的关系: HTML属性绑定:...

  • angular--依赖注入

    在share目录下创建product服务:ng g service share/productangular的依赖...

  • angular--常见管道

    日期格式转换(date) 数字(number) 大小写转换(uppercase、lowercase) 自定义管道(...

  • angular--老师笔记

    1 1.认识AngularJSMVx概念Angular是什么扩展了HTML的功能颠覆性、可扩展为什么使用angul...

  • Angular--命令集

    通过命令行创建组件,路由等,以下内容均采集于网络,此处只是做一个记录,喜欢的可以收藏npm install -g ...

  • Angular--使用数据绑定

    1、数据绑定 数据绑定 是被嵌入模板的表达式,经过求值后可在HTML文档中生成动态内容单向数据绑定 从数据模型流向...

  • Angular--使用内置指令

    什么是内置指令 内置指令 是选择性的包含内容、在不同的内容片段之间进行选择以及重复内容 常用内置指令1.ngIf2...

网友评论

    本文标题:angular--路由

    本文链接:https://www.haomeiwen.com/subject/pmrpgxtx.html