角中路由及其用法的示例

　　介绍

这篇文章主要介绍了角中路由及其用法的示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

<强>一、角创建一个默认带路由的项目

1,命令创建项目

ng新ng-demo——skip-install

角中路由及其用法的示例

2,创建需要的组件

ng  g  component 组件/回家 　　ng  g  component 组件/新闻 　　ng  g  component 组件/newscontent

3,找到app-routing.module。ts配置路由

引入组件

import  {, HomeComponent },得到& # 39;。/组件/home/home.component& # 39;; 　　{},NewsComponent  import 得到& # 39;。/组件/新闻/news.component& # 39;; 　　{import  ProductComponent },得到& # 39;。/组件/产品/product.component& # 39;;

配置路由

const 路线:,Routes =, ( 　　{路径:& # 39;回家# 39;,,组件:,HomeComponent}, 　　{路径:& # 39;新闻# 39;,,组件:,NewsComponent}, 　　{路径:& # 39;产品# 39;,,组件:ProductComponent }, 　　{路径:& # 39;* & # 39;,,redirectTo:, & # 39;/回家# 39;,,pathMatch:, & # 39;全# 39;,} 　　];

4,找到app.component.html根组件模板,配置router-outlet显示动态加载的路由

& lt; h2> 　　,,,& lt; a  routerLink=?home"在首页& lt;/a> 　　,,,& lt; a  routerLink=?news"在新闻& lt;/a> 　　& lt;/h2> 　　& lt; router-outlet> & lt;/router-outlet>

<强>二、角routerLink跳转页面默认路由

& lt; a  routerLink=?home"在首页& lt;/a> 　　& lt; a  routerLink=?news"在新闻& lt;/a> //匹配不到路由的时候加载的组件,或者跳转的路由 　　{ 　　,,,路径:,& # 39;* * & # 39;,,/*任意的路由*/,,,//组件:HomeComponent 　　,,,redirectTo: & # 39;回家# 39; 　　}

<强>三、角routerLinkActive设置routerLink默认选中路由

& lt; h2> 　　& lt;才能a  routerLink=?home", routerLinkActive=癮ctive"比; 　　,,,首页 　　& lt;才能/a> 　　& lt;才能a  routerLink=?news", routerLinkActive=癮ctive"比; 　　,,,新闻 　　& lt;才能/a> 　　& lt;/h2> & lt; h2> 　　,,,& lt; a  [routerLink]=癧, & # 39;/回家# 39;,)“,routerLinkActive=癮ctive"在首页& lt;/a> 　　,,,& lt; a  [routerLink]=癧, & # 39;/新闻# 39;,)“,routerLinkActive=癮ctive"在新闻& lt;/a> 　　& lt;/h2>

<强>四、动态路由

<强> 4.1。问号传参

跳转方式,页面跳转或js跳转
问号传参的url地址显示为…/列表项? id=1

queryParams属性是固定的

& lt; [routerLink]=癧/列表项的]“;[queryParams]=皗id: item.id}“在
{ {item.name}}

//js跳转
//路由器为ActivatedRoute的实例

import  {, Router },得到& # 39;@angular/路由器# 39;; 　　。 　　构造函数(private 路由器,路由器),{} 　　。 　　this.router.navigate ([& # 39;/newscontent& # 39;], { 　　queryParams才能:{ 　　,,,的名字:& # 39;兰妮# 39; 　　,,,id: id 　　,,}, 　　,,skipLocationChange: true //可才能以不写,默认为false,设为true时路由跳转浏览器中的url会保持不变,传入的参数依然有效 　　});

获取参数方式

import  {, ActivatedRoute },得到& # 39;@angular/路由器# 39;; 　　 　　构造函数(public 路线:ActivatedRoute), {,} 　　ngOnInit (), {, 　　,,,this.route.queryParams.subscribe((数据)=祝辞{ 　　,,,,,console.log(数据); 　　,}) 　　}

<强> 4.2路径传参

路径传参的url地址显示为…/列表项/1

& lt; a  [routerLink]=癧/列表项,,item.id]“祝辞,{{,item.name }}//js跳转,//路由器为ActivatedRoute的实例 　　this.router.navigate([/列表项,,item.id]);

路径配置:

{路径:,“列表项/:id”,,组件:,ListItemComponent}

获取参数方式

this.route.params.subscribe ( 　　param 才能=祝辞,{ 　　,,,,,this.id=,参数(& # 39;id # 39;); 　　,,} 　　)

<强>五,父子路由

1,创建组件引入组件

角中路由及其用法的示例