Angular 4 阻止路由器导出重新加载父组件

Question

在我的 app.component.html 中，我有以下代码:

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

当我输入 http://localhost:4200 时，它会加载 AppComponent(目前没有问题)，但是当我输入 http://localhost:4200/success(加载另一条路由)它重新加载 AppComponent。

当我导航到其他路由时，如何防止 Angular 重新加载我的 AppComponent？

app-routing.module

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: 'success', component: SuccessComponent },
  { path: 'error', component: ErrorComponent },
];

Answer 1

扩展@Efe 在评论中所说的内容。

当您在 url 中输入路由时，它会重新加载整个应用程序，无论如何，因为它认为这是一个新网页。要加载它，您需要在应用内导航。

您可以通过多种方式进行导航，每种方式都有其优势，具体取决于您的特定设置。

RouterLink如果您有一个导航 Pane ，特别是如果您有一个父布局组件，这是有益的，因为它是相对于该组件的，使嵌套导航更加简单。

Router Navigate是在组件内部执行此操作的主要方法，并且通常是更常用的导航方法。有了它，您可以进行绝对或相对路由，但相对路由往往更复杂。

您可以在 here 找到更多信息。如果需要的话。

避免使用 window.url 或类似的方式进行导航，因为这与在网址栏中输入 url 相同，并且会重新加载应用。