(六)、Angular4.0 子路由

迈不过友情╰ 2022-05-28 01:38 151阅读 0赞

**一、新建两个组件(商品描述组件和销售员信息组件)**

ng g component productDesc
    ng g component sellerInfo

**二、product-desc.component.html**

<p>
      来自XXXX的山泉水
    </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 添加子路由**

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

**六、修改product.component.html**

<p>
      这里是商品信息组件
    </p>
    <p>
      商品ID ： {
       {productId}}
    </p>
    <a [routerLink]="['./']">商品描述</a>
    <a [routerLink]="['./seller',99]">销售员信息</a>
    <router-outlet></router-outlet>

七、访问localhost:4200

![2018032714523034][]

[2018032714523034]: /images/20220528/e000e48234eb4daf8d80f4ec4677ad31.png

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular 路由

`index.html` 下添加`<base>` 元素，告诉路由器该如何合成导航用的URL <base href="/">复制代码新建angular项目时...

柔光的暖阳◎/ 2024年04月17日 13:49/ 0 赞/ 10 阅读

相关 angular 嵌套路由

mylogin.component.ts import { Component, OnInit } from '@angular/core'; @C

桃扇骨/ 2022年06月01日 07:00/ 0 赞/ 205 阅读

相关 angular 路由传参

cart.component.ts import { Component, OnInit } from '@angular/core'; import {Ro

偏执的太偏执、/ 2022年06月01日 06:54/ 0 赞/ 249 阅读

相关 Angular4--路由基础

【背景】最近在学习Angular，迫不及待的想把学习到的内容跟大家分享。【内容】 1.实现一个简单的路由（1）使用angular-cli创建一个带路由的项目

素颜马尾好姑娘i/ 2022年06月01日 00:23/ 0 赞/ 163 阅读

相关 (六)、Angular4.0 子路由

一、新建两个组件(商品描述组件和销售员信息组件) ng g component productDesc ng g component sellerInfo

迈不过友情╰/ 2022年05月28日 01:38/ 0 赞/ 152 阅读

相关 Angular 路由 ( 二 )

Angular 路由 ( 二 ) > 应用有一个`配置过的路由器`。外壳组件中有一个`RouterOutlet`，它能显示路由器所生成的视图。它还有一些 `Router

我不是女神ヾ/ 2022年05月24日 12:43/ 0 赞/ 231 阅读

相关 Angular 路由(一)

Angular 路由一描述路由 Angular 是一个单页面的应用所有的页面展示都在本页面内完成。我们实现页面局部刷新展示一个班级的学生信息时， 1.

电玩女神/ 2022年05月23日 05:25/ 0 赞/ 176 阅读

相关 Angular 4 子路由

子子路由 ![158914-20170814132405428-297560221.png][] 现在要为产品组件增加两个子组件 1. 创建productDesc和sel

╰+攻爆jí腚メ/ 2022年02月01日 01:31/ 0 赞/ 193 阅读

相关 Angular 路由⑦要素

[![返回主页][logo.gif]cnzt][logo.gif_cnzt] /images/20211229/cd5055aaddfb4a68afcd52b0e5e805f

╰半橙微兮°/ 2022年01月05日 09:11/ 0 赞/ 265 阅读

相关 Angular 学习（五）：Angular 路由（Route）

Angular 路由（Route）我们可以将路由器理解成控制整个应用状态的视图对象，每个应用都有一个路由器；路由器的另一个作用是为每个视图分配唯一的 url，可以

深藏阁楼爱情的钟/ 2021年09月29日 01:48/ 0 赞/ 410 阅读