項目地址：https://angular-jerry-empty-store.stackblitz.io
TopBar Component里，使用Angular routerLink指令設置了一個路由參數/top：

輸入完整的url：https://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 }])

最后的效果：

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

2021-7-8

官網地址

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

總結

以上是生活随笔為你收集整理的Angular应用的router-outlet使用一个例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。