Angular-父子路由(嵌套路由),类似html的iframe

1.创建组件引入组件

import { HomeComponent } from './conponent/home/home.component';
import { WelcomeComponent } from './conponent/welcome/welcome.component';
import { SettingComponent } from './conponent/setting/setting.component';
import { ProductComponent } from './conponent/product/product.component';
import { ProductCatComponent } from './conponent/product-cat/product-cat.component';
import { ProductListComponent } from './conponent/product-list/product-list.component';

const routes: Routes = [
  {
    path:'home',component:HomeComponent,
    children:[
      {path:'welcome',component:WelcomeComponent},
      {path:'setting',component:SettingComponent},
      {path:'**',redirectTo:'home'}
    ]
  },
  {
    path:'product',component:ProductComponent,
    children:[
      {path:'productCat',component:ProductCatComponent},
      {path:'productList',component:ProductListComponent}
    ]
  },
  //匹配不到路由的时候加载的组件 或跳转的路由
  {path:'**',redirectTo:'home'}
];

2.app.component.html根html

<h1>我是根组件</h1>
<!--<app-home></app-home>-->
<header class="header">
<!--  <a [routerLink]="['/rc1']" routerLinkActive="active">rc1(这是动态改变地址)</a>-->
<!--  <a routerLink='/rc2' routerLinkActive="active">rc2(这是静态地址)</a>-->
  <a [routerLink]="['/home']" routerLinkActive="active">首页</a>
  <a [routerLink]="['/product']" routerLinkActive="active">商品</a>
</header>

<hr/>
<!--嵌套路由-->


<router-outlet></router-outlet>

3.home.html

<div class="content">
  <div class="left">
    <a [routerLink]="['/home/welcome']">欢迎首页</a>
    <br>
    <br>
    <a [routerLink]="['/home/setting']">系统设置</a>
  </div>
  <div class="right">
    右侧,router-outlet必须引用右侧才能生效
    <router-outlet></router-outlet>
  </div>
</div>

4.home.css

.content{
  width: 100%;
  height: 500px;
  display: flex;
}
.left{
  width: 200px;
  border-right: 1px solid red ;
  height: 500px;
}
.right{
  flex: 1px;
}
.active{
  color: red;
}