Angular路由如何避免AppComponent始终渲染，仅根路径展示对应内容

你遇到的现象是Angular的根组件渲染逻辑和路由配置冲突导致的：

• Angular项目启动时会固定渲染根模块bootstrap配置中指定的AppComponent，因此默认情况下AppComponent的模板内容会在所有路由下都显示
• 你同时将根路径/的路由匹配规则也指向了AppComponent，相当于<router-outlet>内部会二次渲染AppComponent，所以根路径下文本会重复出现
• 访问/user路由时，外层的根AppComponent不会销毁，因此它的模板内容会和UserComponent的内容同时展示

推荐将业务内容和根容器组件拆分，逻辑更清晰：

1. 新建一个独立的HomeComponent作为根路径对应的页面组件，把原来AppComponent模板里的I'm in the app component文本移到HomeComponent的模板文件中
2. 修改app.component.html，仅保留路由出口，移除业务内容：

<router-outlet></router-outlet>

3. 修改app.routing.module.ts的路由配置：

const routes: Routes = [
  {
    path: '', component: HomeComponent
  },
  {
    path: 'user', component: UserComponent
  }
];

如果不想额外新增组件，也可以通过路由判断控制内容显示：

1. 给AppComponent注入Router服务：

// app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public router: Router) {}
}

2. 修改app.component.html，给文本加上路由判断：

<div *ngIf="router.url === '/'">
 I'm in the app component
</div>
<router-outlet></router-outlet>

3. 移除路由配置里根路径匹配AppComponent的规则：

const routes: Routes = [
  {
    path: 'user', component: UserComponent
  }
];

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