Angular之＜router-outlet＞

angular默认了index.html 是整个APP的页面入口。
是在angular.json文件中配置的：

<router-outlet> 是一个占位符，Angular 会根据当前的路由器状态动态填充它。

<!-- app.component.html -->

<ul>
  <li>
    <a [routerLink]="['/route-learn']">route-learn component</a>
  </li>
  <li>
    <a [routerLink]="['/test']">test component</a>
  </li>
  <li>
    <a [routerLink]="['/http-learn']">httpLearn component</a>
  </li>
</ul>
<router-outlet></router-outlet>

在app-routing.module.ts中配置路由

const routes: Routes = [
  { path: '', component: TestComponent },
  {
    path: 'route-learn',
    loadChildren: () => import('./route-learn/route-learn.module').then(mod => mod.RouteLearnModule)
  },
  { path: 'test', component: TestComponent },
  { path: 'http-learn', component: HttpLearnComponent },

];

运行 http://localhost:4200 时，显示页面为：

因为路配置时默认路由加载的是 TestComponent，所以这个组件会填充到<router-outlet> 位置。


点击页面中的a标签时，<router-outlet> 位置会分别显示对应路由下的的组件页面。

第一个a标签：