Angular之＜router-outlet＞

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

index.html代码如下：

代码中有一段是 <app-root></app-root>
这段会被app.component.html页面所替换掉

<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标签：

注意： 如果我们在app.component.html中不写<router-outlet>的话，我们点击超链接页面是没有任何反应的，因为没有了<router-outlet>占位符，它不知道应该把路由对应的组件放到哪个位置。