Angular4-在线竞拍应用-路由
|
angular是单页应用需要配置路由来实现页面跳转。 路由的例子通过超链接导航新建一个项目， 然后用webstorm打开项目 生成项目时添加了–routing参数后， 会多生成一个app-routing.module.ts文件 import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
const routes: Routes = [
{
path:'',children: []
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],exports: [RouterModule],providers:[]
})
export class AppRoutingModule { }
在app.module.ts中也会多引入AppRoutingModule import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],imports: [
BrowserModule,FormsModule,HttpModule,AppRoutingModule
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
在app.component.html中会加入router-outlet <h1>
{{title}}
</h1>
<router-outlet></router-outlet>
新生成两个组件ng g component home，ng g component product 然后修改app-routing.modules.ts，为了保证通用性，这里写地址的时候不要在前面加上/ const routes: Routes = [
{path:'',component:HomeComponent},{path:'product',component:ProductComponent}
];
修改app.component.html <a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a>
<router-outlet></router-outlet>
当我访问localhost:4200的时候显示的是home works！,当我点击商品详情，会显示product works!并且地址变成了localhost:4200/product 通过触发事件导航修改app.component.html <a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<router-outlet></router-outlet>
import { Component } from '@angular/core';
import {Router} from "@angular/router";
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(private router: Router){}
toProductDetails(){
this.router.navigate(['/product']);
}
}
运行程序，点击按钮，下边就会显示product works! 配置404页面路由新生成一个组件ng g component code404 修改app-routing.module.ts const routes: Routes = [
{path:'',component:ProductComponent},{path:'**',component:Code404Component}
];
当访问一个不存在的路径时会显示code404 works! 显示路由是从上往下匹配地址，如果把{path:’**’,component:Code404Component}放到前面不管访问那个页面都会显示code404了。所以具有通用性的路由要放到最后边。 在路由中传递数据在查询参数中传递数据 /product?id=1&name=2 => ActivatedRoute.queryParams[id]
在路由路径中传递数据 {path:/product/:id} =>/product/1 => ActivatedRoute.queryParams[id]
在路由配置中传递数据 {path:/product,component:ProductComponent,date[{isProd:true}]}
=> ActivatedRoute.data[0][isProd]
在查询参数中传递数据修改app.component.html <a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>
这样点击这个连接的时候地址就会为http://localhost:4200/product?id=1 修改product.component.ts import {Component,OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
@Component({
selector: 'app-product',templateUrl: './product.component.html',styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
private productId: number;
constructor(private routeInfo: ActivatedRoute) {
}
ngOnInit() {
this.productId = this.routeInfo.snapshot.queryParams["id"];
}
}
修改product.component.html <p>
这里是商品信息组件
</p>
<p>
商品ID是：{{productId}}
</p>
在路由路径中传递数据修改app-routing.module.ts {path:'product/:id',component:ProductComponent},
修改app.component.html <a [routerLink]="['/product',1]">商品详情</a>
修改product.component.ts this.productId = this.routeInfo.snapshot.params["id"];
参数快照和参数订阅修改app.component.ts，加了一个参数2 this.router.navigate(['/product',2]);
启动程序。我点击了主页链接后再点商品详情链接。我点击主页链接，然后点击商品详情按钮。都很正常，链接和下面显示的商品id都对应的上。 但是，当我点击商品详情链接之后，再点击商品详情按钮。地址栏由1变成了2，但下边显示的商品id却还是1。 从home组件到product组件会重新创建product组件重新调用ngOnInit方法。 从product组件到product组件，不会重新创建product组件，所以不会重新调用ngOnInt方法。 之前我们使用的都是snapshot，参数快照。 现在我们用参数订阅，subscribe，来解决这个问题 修改product.component.ts this.routeInfo.params.subscribe((params: Params)=>this.productId=params["id"]);
弄了一个匿名函数把传进来的params参数赋值给productId 这样做了之后就没有之前的问题了。 虽然商品详情组件没有被创建，但是参数变了，而我订阅了那个参数，每次我都能接受到改变了的那个值，然后把这个值赋值为productId。 在以后写代码中如果确定不会从自身路由到自身就可以用参数快照的方式。 如果不确定就要用参数订阅的方式来获取参数。 重定向路由在用户访问一个特定的地址时，将其重定向到另一个指定的地址。 修改app-routing.module.ts const routes: Routes = [
{path:'',redirectTo:'/home',pathMatch:'full'},{path:'home',{path:'product/:id',component:Code404Component}
];
当我访问localhost:4200的时候会重定向到home 修改app.component.html <a [routerLink]="['/home']">主页</a>
子路由{path:'home',component:HomeComponent,children:[ { path:'',component:XxxComponent },{ path:'/yyy',component:YyyComponent }
]}
创建商品描述组件ng g component productDesc 创建销售员信息组件ng g component sellerInfo 修改product-desc.component.html <p>
这是一个牛X的商品！
</p>
修改seller-info.component.html <p> 销售员ID是：{{sellerId}} </p>
修改seller-info.component.ts import { Component,OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-seller-info',templateUrl: './seller-info.component.html',styleUrls: ['./seller-info.component.css']
})
export class SellerInfoComponent implements OnInit {
private sellerId:number;
constructor(private routeInfo:ActivatedRoute) { }
ngOnInit() {
this.sellerId=this.routeInfo.snapshot.params["id"];
}
}
修改app-routing.module.ts {path:'product/:id',children:[ {path:'',component:ProductDescComponent},{path:'seller/:id',component:SellerInfoComponent}
]},
修改product.component.html <p> 这里是商品信息组件 </p> <p> 商品ID是：{{productId}} </p> <a [routerLink]="['./']">商品描述</a> <a [routerLink]="['./seller',99]">销售员信息</a> <router-outlet></router-outlet>
/是从跟路由开始找，./是从当前路由开始找。 路由信息都是在模块层的，组件本身不知道关于路由的信息。 辅助路由<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
{path:'xxx',component:XxxComponent,outlet:"aux"}
{path:'yyy',component:YyyComponent,outlet:"aux"}
<a [routerLink]="['/home',{outlets:{aux:'xxx'}}]">Xxx</a> <a [routerLink]="['/product',{outlets:{aux:'yyy'}}]">Yyy</a>
以前一个组件中只可以定义一个插座，而现在可以定义多个插座。 辅助路由案例整体思路
修改app.component.html，添加辅助路由 <router-outlet name="aux"></router-outlet>
新创建一个组件ng g component chat 修改chat.component.html <textarea placeholder="请输入聊天内容" class="chat"></textarea>
修改chat.component.css .chat{ background:green; height:100px; width:30%; float: left; box-sizing:border-box; }
修改product.component.html <div class="product"> <p> 这里是商品信息组件 </p> <p> 商品ID是：{{productId}} </p> <a [routerLink]="['./']">商品描述</a> <a [routerLink]="['./seller',99]">销售员信息</a> <router-outlet></router-outlet> </div>
修改product.component.css .product{ background:yellow; height:100px; width:70%; float: left; box-sizing:border-box; }
修改home.component.html <div class="home">
<p>
这里是主页组件
</p>
</div>
修改home.component.css .home{ background:red; height:100px; width:70%; float: left; box-sizing:border-box; }
修改app-routing.module.ts {path:'',pathMatch:'full'},{path:'chat',component:ChatComponent,outlet:'aux'},
修改app.component.html <a [routerLink]="['/home']">主页</a>
<a [routerLink]="['/product',1]">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<a [routerLink]="[{outlets:{aux:'chat'}}]">开始聊天</a>
<a [routerLink]="[{outlets:{aux:null}}]">结束聊天</a>
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
修改app.component.html <a [routerLink]="[{outlets:{primary:'home',aux:'chat'}}]">开始聊天</a>
当我点击开始聊天时，主路由会显示为home。 路由守卫应用场景：
三种路由守卫
CanActivate守卫app，右键，新建一个目录，名字为guard，右键guard，新建一个TypeScript文件，名字为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;
}
}
修改app-routing.module.ts {path:'product/:id',component:SellerInfoComponent}
],canActivate:[LoginGuard]},@NgModule({ imports: [RouterModule.forRoot(routes)],exports: [RouterModule],providers:[LoginGuard] })
CanDeactivate守卫右键guard，新建一个TypeScript文件，名字为unsave.guard.ts 填写代码 import {ProductComponent} from "../product/product.component";
import {CanDeactivate} from "@angular/router";
export class UnsavedGuard implements CanDeactivate<ProductComponent>{
canDeactivate(component: ProductComponent){
return window.confirm("你还没有保存，确定要离开么？");
}
}
修改app-routing.module.ts {path:'product/:id',component:SellerInfoComponent}
],canActivate:[LoginGuard],canDeactivate:[UnsavedGuard]},providers:[LoginGuard,UnsavedGuard] })
resolve守卫解决的问题，在显示页面之前，页面中的数据显示的时候可能有延迟，这样显示数据的地方会都显示空。 这个守卫的作用就是，在显示页面之前预先到服务器去读数据 右键guard，新建一个TypeScript文件，名字为product.resolve.ts import {Resolve,ActivatedRouteSnapshot,RouterStateSnapshot,Router} from "@angular/router";
import {Product} from "../product/product.component";
import {Observable} from "rxjs";
import {Injectable} from "@angular/core";
@Injectable()
export class ProductResolve implements Resolve<Product>{
constructor(private router:Router){}
resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<Product> | Promise<Product> | Product {
let productId:number=route.params["id"];
if(productId==1){
return new Product(1,"iPhone7")
}else{
this.router.navigate(['/home']);
return undefined;
}
}
}
修改product.component.ts import {Component,OnInit} from '@angular/core';
import {ActivatedRoute,Params} from "@angular/router";
@Component({
selector: 'app-product',styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
private productId: number;
private productName:string;
constructor(private routeInfo: ActivatedRoute) {
}
ngOnInit() {
this.routeInfo.params.subscribe((params: Params)=>this.productId=params["id"]);
this.routeInfo.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){}
}
修改product.component.html <div class="product">
<p>
这里是商品信息组件
</p>
<p>
商品ID是：{{productId}}
</p>
<p>
商品名称是：{{productName}}
</p>
<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">销售员信息</a>
<router-outlet></router-outlet>
</div>
改造在线竞拍应用步骤：
新建组件ng g component productDetail 修改product-detail.component.ts import { Component,OnInit } from '@angular/core';
import{ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-product-detail',templateUrl: './product-detail.component.html',styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
productTitle:string;
constructor(private routeInfo:ActivatedRoute) { }
ngOnInit() {
this.productTitle=this.routeInfo.snapshot.params["prodTitle"];
}
}
修改product-detail.component.html <div> <img src="http://placehold.it/820x230"> <h4>{{productTitle}}</h4> </div>
创建home组件,ng g component home 把app.component.css的内容剪切到home.component.css 把app.component.html中的以下内容复制到home.component.html <div class="row carousel-container">
<app-carousel></app-carousel>
</div>
<div class="row">
<app-product></app-product>
</div>
并添加 <router-outlet></router-outlet>
到原来的位置 修改app.module.ts const routeConfig:Routes=[
{path:'',{path:'product/:prodTitle',component:ProductDetailComponent}
]
imports: [
BrowserModule,RouterModule.forRoot(routeConfig)
],
修改product.component.html，增加routerLink <h4><a [routerLink]="['/product'],product.title">{{product.title}}</a></h4> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |