Angular 4路由失效求助：URL变更但视图未切换

嘿，我一眼就揪出问题啦！你的路由配置逻辑本身没毛病，但根组件模板里缺了Angular路由的核心指令——<router-outlet>。

问题根源 #

你现在在app.component.html里直接硬编码了<app-page1></app-page1>，这就导致不管路由怎么切换，这个组件都会固定显示在页面上。Angular需要通过<router-outlet>来确定：匹配到的路由组件该渲染到页面的哪个位置。没有它的话，路由切换只会修改URL，完全不会触发视图更新。

修复步骤 #

把你的app.component.html改成下面这样：

<div style="text-align:center"> <h1> Welcome to SuperHero! </h1> </div>
<!-- 用路由出口替换硬编码的page1组件 -->
<router-outlet></router-outlet>

额外优化（可选） #

如果希望用户打开应用时默认显示page1，可以在路由配置里加一条默认重定向规则：

RouterModule.forRoot([
  {path: '', redirectTo: '/page1', pathMatch: 'full'}, // 新增默认路由
  {path:'page1', component:Page1Component},
  {path:'page2', component:Page2Component}
])

改完之后再点击page1的按钮，URL切换到/page2的同时，视图也会自动替换成Page2Component啦！

内容的提问来源于stack exchange，提问作者Kallam