Angular 4如何避免路由切换时AppComponent重新加载？

嘿，我来帮你搞定这个问题！你遇到的AppComponent在路由跳转时重新加载的情况，大概率是路由配置出了小问题，咱们一步步来排查解决：

核心原因 #

你的AppComponent是整个应用的根容器组件（通过app.module.ts里的bootstrap: [AppComponent]指定的），它的作用就是承载<router-outlet>，让路由组件在里面切换。如果你的路由配置里不小心把AppComponent当成了某个路由的目标组件，就会导致导航时重复加载它。

具体解决步骤 #

1. 修正路由配置 #

打开你的app-routing.module.ts，检查routes数组的配置。正确的写法应该是根路径加载你的首页组件（比如HomeComponent），而不是AppComponent。举个例子：

const routes: Routes = [
  { path: '', component: HomeComponent }, // 这里放你的首页组件，不是AppComponent
  { path: 'success', component: SuccessComponent }, // 你的success路由组件
  // 其他路由规则...
];

记住：AppComponent是根组件，永远不需要出现在路由配置的component字段里！

2. 确认AppComponent的定位 #

保持你现在app.component.html的写法就对了：

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

它只需要做布局容器，负责渲染路由出口里的内容，本身不会被路由导航重新加载。

3. 排查其他可能的问题 #

• 检查有没有在其他组件里重复添加<router-outlet>，多余的出口可能导致意外的组件加载；
• 确认AppRoutingModule只在AppModule里导入了一次，重复导入可能引发路由配置冲突。

这样调整后，当你从/导航到/success时，就只会替换<router-outlet>里的内容，AppComponent会一直保持加载状态，不会被重新渲染啦～

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