angular中组件之间的嵌套使用

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

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>