Angular 4如何阻止router-outlet重新加载父组件

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 },
];

- brazuka

---

在应用程序中，你应该使用路由链接而不是在 URL 地址栏中输入网址，这样应用程序就不会重新加载。详情请参考：https://angular.io/guide/router - Efe

Answer 1

从angular.io，路由器在匹配路由时使用“先到先得”的策略，因此更具体的路由应该放在不太具体的路由之上。顺序应该是：

1. 带有静态路径的路由，

2. 空路径路由，匹配默认路由。

3. 通配符路由最后一个，因为它匹配每个URL，并且只有在没有其他路由匹配时才选择它。

更改顺序将解决问题：

const routes: Routes = [

              { path: 'success', component: SuccessComponent },
              { path: 'error', component: ErrorComponent },
              { path: '', pathMatch: 'full', component: HomeComponent },
            ];

- Vikas

---

由于pathMatch是full，这不是一个问题，因为他的空路径非常具体。同样，这并不能解决它重新加载的问题。 - Joo Beck

Answer 2

在评论中，@Efe所说的内容得到了拓展。

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

您可以使用多种方式进行导航，每种方式都有不同的优点，具体取决于您的设置。

RouterLink非常有益，特别是如果您有一个导航窗格，尤其是如果您有一个父布局组件，因为它相对于该组件，使嵌套导航更加简单。

Router Navigate是在组件内部执行导航的主要方法，通常是更常见的导航方法。使用它，您可以进行绝对或相对路由，尽管相对路由往往更复杂。

如果需要，您可以在此处找到更多信息。

避免使用window.url或类似方法进行导航，因为这与在url栏中输入url相同，并将重新加载应用程序。

- Joo Beck

---

有没有其他的方法可以做到这一点。为了SEO目的，改变URL是更好的选择，但你不想重新加载页面等等。 - Jonathan

利用路由器可以更新URL而无需重新加载页面。 - Joo Beck