angular中组件之间的嵌套使用

本文介绍了在Angular中如何进行组件间的嵌套使用,详细步骤包括创建组件文件、导入到app.module和app.router模块,以及在HTML页面中设置页面布局。

第一步先把对应的文件创建好

main.component.ts
phone.component.ts
books.component.ts
details.component.ts

第二步
导入到我们的app.module文件中

import { mainComponent} from './demo11/main.component';
import { booksComponent} from './demo11/books.component';
import { phoneComponent} from './demo11/phone.component';
import { detailsComponent} from './demo11/details.component';
//接着去声明

第三步
导入我们的app.router中,并创建对应的路由词典

{
        path:"main",
        component: mainComponent,
        children:[
            {path:"",component: phoneComponent},
            {path:"phone",component: phoneComponent},
            {path:"books",component: booksComponent},
        ]
    },
    {path:"details",component: detailsComponent},

接下来就是在html中写我们的页面

//main中
<h1>产品中心</h1>
<a [routerLink]="['books']">笔记本</a>
<a [routerLink]="['phone']">手机</a>
<router-outlet></router-outlet>

//books中
books:Array<string>=["华硕","神州","雷神","戴尔","机械师"]
<ul>
    <li *ngFor="let item of books;let myIndex=index">
        <a [routerLink]="['/details',{name:item,key:myIndex}]">{{myIndex}}:{{item}}</a>
    </li>
</ul>

//phone中
phone:Array<string>=["华为","苹果","三星","OPPO","vivo"]
<ul>
    <li *ngFor="let item of phone;let myIndex=index">
        <a [routerLink]="['/details',{name:item,key:myIndex}]">{{myIndex}}:{{item}}</a>
    </li>
</ul>
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute} from '@angular/router';
@Component({
    selector: 'details',
    templateUrl: './details.html'
})
//details中
export class detailsComponent implements OnInit {
    pkey:number=0;
    pname:string="";
    constructor(private myAr:ActivatedRoute) { }

    ngOnInit() { 
        this.myAr.params.subscribe((result:any)=>{
            this.pkey=result.key;
            this.pname=result.name;
        })
    }
}
<div>
    <h1>商品信息页面</h1>
    <p>商品名字:{{pname}}</p>
    <p>商品ID:{{pkey}}</p>
    <a [routerLink]="['/main']" >返回首页</a>
</div>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值