Angular应用的router-outlet使用一个例子

项目地址：angular-jerry-empty-store.stackblitz.io
TopBar Component里，使用Angular routerLink指令设置了一个路由参数/top：

输入完整的url：angular-jerry-empty-store.stackblitz.io/top之后，
界面如图：

路由参数top自动从地址栏里消失了。
App.component.html:

里面定义了router-outlet:

<app-top-bar></app-top-bar>

<div class="container"><router-outlet></router-outlet></div>

<!-- 
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

在app.module.ts里，使用如下的代码为路由参数jerry定义另一个ProductListComponent：

 RouterModule.forRoot([{ path: "jerry", component: ProductListComponent }])

最后的效果：

angular-jerry-empty-store.stackblitz.io/jerry

更多Jerry的原创文章，尽在：“汪子熙”: