详解Angular路由之子路由

 更新时间:2021年05月24日 10:16:19   作者:starof  
本文将介绍Angular子路由的用法,对此感兴趣的同学,可以参考下

一、子路由语法

二、实例

在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息。

通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部。

1、新建2个组件修改其内容

ng g component productDesc
ng g component sellerInfo

重点是修改销售员信息组件,显示销售员ID。

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"];
  }

}

2、修改路由配置

给商品组件加上子路由

const routes: Routes = [
  { path: '', redirectTo : 'home',pathMatch:'full' }, //路径为空
  { path: 'home', component: HomeComponent },
  { path: 'product/:id', component: ProductComponent, children:[
    { path: '', component : ProductDescComponent },
    { path: 'seller/:id', component : SellerInfoComponent }
  ] },
  { path: '**', component: Code404Component }
];

3、修改product.component.ts的模版

注意:routerLink里要配置成./,不能再用/。

<p>
  这里是商品信息组件
</p>
<p>
  商品id是: {{productId}}
</p>

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

效果:

主路由是/product/2,子路由为空字符串:

主路由的商品详情组件显示出来了,子路由的空字符串对应的商品描述组件也显示出来了。

点销售员信息链接:

URL路径变成:http://localhost:4201/product/2/seller/99。

子路由seller/99,对应的sellerInfo组件也展示出来。

注意:

1、插座router-out形成父子关系,可以无限嵌套

2、所有的路由信息都是在模块层,在app.routing.module.ts中配置的。

路由信息都是在模块层,所有的组件本身,并不知道任何跟路由相关的信息。

插座之间的父子关系——子路由。

插座之间的兄弟关系——辅助路由。

以上就是详解Angular路由之子路由的详细内容,更多关于Angular的资料请关注脚本之家其它相关文章!

相关文章

  • 详解angularjs中的隔离作用域理解以及绑定策略

    详解angularjs中的隔离作用域理解以及绑定策略

    本篇文章主要介绍了详解angularjs中的隔离作用域理解以及绑定策略,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Angular使用cli生成自定义文件、组件的方法

    Angular使用cli生成自定义文件、组件的方法

    这篇文章主要介绍了Angular使用cli生成自定义文件、组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 解决Angular.js中使用Swiper插件不能滑动的问题

    解决Angular.js中使用Swiper插件不能滑动的问题

    下面小编就为大家分享一篇解决Angular.js中使用Swiper插件不能滑动的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • AngularJS ng-template寄宿方式用法分析

    AngularJS ng-template寄宿方式用法分析

    这篇文章主要介绍了AngularJS ng-template寄宿方式用法,结合实例形式分析了ng-template模板的相关使用技巧,需要的朋友可以参考下
    2016-11-11
  • jquery操作angularjs对象

    jquery操作angularjs对象

    这篇文章主要介绍了jquery操作angularjs对象的相关资料,需要的朋友可以参考下
    2015-06-06
  • Angular2生命周期钩子函数的详细介绍

    Angular2生命周期钩子函数的详细介绍

    这篇文章主要介绍了Angular2生命周期钩子函数的详细介绍,Angular提供组件生命周期钩子,可以让我们更好的开发Angular应用,有兴趣的可以了解一下
    2017-07-07
  • Angular.js自动化测试之protractor详解

    Angular.js自动化测试之protractor详解

    Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架,下面这篇文章主要给大家介绍了angular.js自动化测试之protractor的相关资料,需要的朋友可以参考下。
    2017-07-07
  • AngularJS基础 ng-if 指令用法

    AngularJS基础 ng-if 指令用法

    本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下
    2016-08-08
  • AngularJS使用ng-repeat遍历二维数组元素的方法详解

    AngularJS使用ng-repeat遍历二维数组元素的方法详解

    这篇文章主要介绍了AngularJS使用ng-repeat遍历二维数组元素的方法,结合实例形式分析了AngularJS二维数组元素遍历的相关操作技巧,需要的朋友可以参考下
    2017-11-11
  • 利用Ionic2 + angular4实现一个地区选择组件

    利用Ionic2 + angular4实现一个地区选择组件

    ionic是一个移动端开发框架,使用hybird技术,只要使用前端开发技术就可以开发出电脑端,安卓端和ios端的站点程序。下面这篇文章主要给大家介绍了关于利用Ionic2 + angular4实现一个地区选择组件的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07

最新评论