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在评论中所说的内容。

当您将路径输入到网址时，它会重新加载整个应用，无论如何，因为它认为这是一个新的网页。要加载它，您需要在应用内导航。

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

如果您有导航窗格，

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

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

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

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

Answer 2

来自Angular.io 路由器在匹配路由时使用第一匹配胜利策略，因此应将更具体的路由放置在不太具体的路由上方。订单应该是：

具有静态路径的路线
空路径路径，与默认路由匹配。
通配符路由是最后一个，因为它匹配每个只有在没有首先匹配其他路由时才应选择URL。

更改订单将解决问题：

const routes: Routes = [

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

Angular 4防止路由器出口重新加载父组件

2 个答案: