Angular访问success-component路由路径仍显示首页内容问题问询

• 缺少路由出口标签：Angular 路由匹配到的组件必须通过 <router-outlet> 标签渲染，如果你没有在根组件 app.component.html 中添加该标签，匹配到的Success组件没有渲染入口，页面就会一直显示根组件内写死的首页内容。
• 根组件耦合了首页内容：如果你直接把首页的代码写在根组件 app.component.html 中，就算加了 <router-outlet>，根组件的首页内容还是会固定显示在页面中，路由渲染的内容只会出现在 <router-outlet> 所在位置，不会覆盖根组件本身的内容。
• 路由模块未正确导入：排查 AppModule 中是否已经将 AppRoutingModule 加入 imports 数组，没有正确导入的话路由规则不会生效。

推荐方案（符合Angular最佳实践） #

1. 拆分首页组件
   将原本写在 app.component.html 中的所有首页内容，迁移到单独新建的 HomeComponent 中，不要让根组件承载任何业务页面的内容。
2. 补充根路径路由配置
   修改路由规则，增加根路径的匹配规则：

const routes: Routes = [
  // 根路径匹配首页组件
  { path: '', component: HomeComponent },
  { path:'success-componenet', component: SuccessComponenetComponent }
];

3. 修改根组件内容
   清空 app.component.html 中所有内容，仅保留路由出口标签：

<router-outlet></router-outlet>

完成以上操作后，访问根路径 http://localhost:4200 会渲染首页内容，访问 http://localhost:4200/success-componenet 就会渲染内容为空的成功组件，页面显示空白。

临时兼容方案（无需拆分组件） #

如果暂时不想拆分首页组件，可以通过路由判断控制首页内容的显示：

1. 在根组件 app.component.ts 中注入Router服务：

import { Router } from '@angular/router';
//...
constructor(public router: Router) {}

2. 修改 app.component.html 内容，给原首页内容增加路由判断，同时添加路由出口：

<div *ngIf="router.url === '/'">
  <!-- 这里放原来写在根组件里的所有首页内容 -->
</div>
<router-outlet></router-outlet>

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