Angular 路由
发布时间:2020-12-17 08:12:30 所属栏目:安全 来源:网络整理
导读:路由的五个关键对象: 【注意:使用路由前应该先检查是否安装了@angular/router。如果没有,先使用命令:ng g router 下载相关依赖的包。】 Routes Routes(路由配置),一般在app.routing.module.ts文件里配置,Routes里面是一组路由对象,每个对象有两个属性
路由的五个关键对象:【注意:使用路由前应该先检查是否安装了@angular/router。如果没有,先使用命令:ng g router 下载相关依赖的包。】RoutesRoutes(路由配置),一般在app.routing.module.ts文件里配置,Routes里面是一组路由对象,每个对象有两个属性:path(路由对象的路径)+component(路由对象的组件),即,当我导航到某一个路径(path)上时,angular会显示哪个组件(component) <!-- app.module.ts里面的设置-->
import{Routes,RouterModule} from "@angular/router";//先引入Routes
const routes: Routes = [
{path: '',component:HomeComponent },//当路径为空时,显示home组件
{path: 'product',component:ProductComponent},//当路径为product时显示product组件
{path: 'product/:id',component:ProductComponent}
{path:'**',component:Code404Component},//这个是通配符路由,当匹配不到导航的路径时,就会跳转到自己设定的code404组件
];
//注意:路径是有顺序的。如果把通配符放在了第一位,那么久找不到后面的页面了。
RouterOutlet插座:当我用路由根据path导航到某个组件时候,这个组件会显示到这个插座的后面 <!-- app.component.html里面的设置-->
<div class="col-md-9">
<router-outlet></router-outlet> // 通过路由设置,在插座这显示不同内容。
</div>
Routerrouter在运行时执行路由的对象 RouterLinkrouterLink用斜杠开头表示导航到根路由,./表示导航到子路由,这里我们是导航到根路由,所以点击主页之后会去app-routing.modules(路由配置)里面找到我们的所有根路由,然后找到名字匹配的根路由,展示相应的组件 <!-- 通过页面链接跳转的 -->
<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product',1]">商品详情</a>
ActivedRoute当前激活路由对象,主要用于保存路由,获取路由传递的参数。 1.参数快照(snapshot):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 {
//声明一个变量来接收路由传递过来的productId
private productId:number;
//定义一个构造方法,注入ActivatedRoute参数
constructor(private routeInfo: ActivatedRoute) { }
ngOnInit() {
//通过参数快照获得传递过来的id参数的值,然后赋给了productId
this.productId=this.routeInfo.snapshot.queryParams["id"];
}
}
2.参数订阅(subscribe):import { Component,OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Params } from "@angular/router";
@Component({
selector: 'app-product',styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
private productId:number; //定义一个变量来接收路由传递过来的productId
constructor(private routeInfo: ActivatedRoute) { }
ngOnInit() {
//参数订阅,订阅后声明一个匿名函数来处理传递过来的参数,从参数取出id
this.routeInfo.params.subscribe((params:Params)=>this.productId=params["id"]);
}
} (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |