(六)、Angular4.0 子路由

迈不过友情╰ 2022-05-28 01:38 237阅读 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 条评论，237人围观）

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

相关阅读

相关 angular 路由

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

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

相关 Angular2 --- 路由

审查路由器配置你把大量的精力投入到在一系列路由模块文件里配置路由器上，并且小心的以合适的顺序列出它们。这些路由是否真的如同你预想的那样执行了？路

墨蓝/ 2024年02月19日 12:33/ 0 赞/ 76 阅读

相关 angular子路由，父路由公共变量赋值，调用

> 场景： > 父路由 app.parent > 子路由 app.parent.childA 、app.parent.childB > 在父路由定义一个变量 $s

曾经终败给现在/ 2023年02月10日 01:17/ 0 赞/ 24 阅读

相关 angular 嵌套路由

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

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

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

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

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

相关 Angular 路由 ( 二 )

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

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

相关 Angular 路由(一)

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

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

相关 Angular 4 子路由

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

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

相关 Angular 路由⑦要素

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

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

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

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

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