Question

我创建了一个路由器链接，如下所示。此路由器链接加载ProductsStartComponent，然后此组件使用ngif而非导航加载其他几个组件。由于以下产品类别链接在所有页面中均可见，因此如果我在到达ngif的某个组件后点击此链接，则不会将我带回ProductsStartComponent。

由于我是Angular的新手，我对这种行为的理解是因为所有的价值/模型都已设定，这就是为什么它没有导航。我想这可以通过刷新或重新加载页面来实现，但是如何实现。请指教。

在admin.component.html中，路由器链接定义为单击返回

<li routerLinkActive="active"><a routerLink="categories"><p>Products Categories</p></a></li>

返回

在app-routing.module.ts中，单击路由器链接时需要加载哪个组件

const appRoutes: Routes = [
{path: 'admin', component: AdminComponent, children: [
    { path: 'dashboard', component: AdminDashboardComponent },
    { path: 'sellers', component: AdminSellersComponent },
    { path: 'categories', component: ProductsStartComponent}
]}]

在product-start.component.html中，首次点击路由器链接时会加载。现在，如果我点击编辑按钮并移动到其他组件，如果我点击产品类别路由器链接再次，没有任何反应，我希望它重置页面。

<div>
    <div *ngIf="!isChildProductClicked; else notClicked" >
       <app-admin-products (productId)="received($event)"></app-admin-products>
    </div>
    <ng-template #notClicked><app-child-products [selProdIndex]=productIndex></app-child-products></ng-template>
</div>

Answer 1

如果您想重新加载页面，可以轻松转到您的组件，然后执行以下操作：

location.reload();

Answer 2

以防万一其他人遇到此问题。您需要致电

window.location.reload()

您不能从表达式中调用它。如果要通过click事件调用此函数，则需要将其放在函数中：

(click)="realodPage()"

只需定义函数：

reloadPage() {
   window.location.reload();
}

如果您要更改路线，则可能不起作用，因为click事件似乎在路线更改之前发生。一个非常肮脏的解决方案就是增加一个小的延迟

reloadPage() {
    setTimeout(()=>{
      window.location.reload();
    }, 100);
}

Answer 3

没有更多的代码......很难说出了什么。

但是如果您的代码看起来像这样：

<li routerLinkActive="active">
  <a [routerLink]="/categories"><p>Products Categories</p></a>
</li>
...
<router-outlet></router-outlet>
<myComponentA></myComponentA>
<myComponentB></myComponentB>

然后单击路由器链接将路由到类别路由并在路由器插座中显示其模板。

隐藏和显示子组件不会影响路由器插座中显示的内容。

因此，如果再次单击该链接，则类别路由已显示在路由器插座中，并且不会再次显示/重新初始化。

如果您可以更具体地了解您的目标，我们可以为您提供更具体的建议。： - ）

Answer 4

更新

如何在Angular 2+中实现页面刷新，请注意这是在您的组件中完成的：

location.reload();

Answer 5

我找到的最简单的解决方案是：

在你的标记中：

<a [href]="location.path()">Reload</a>

并在您的组件打字稿文件中：

constructor(
        private location: Location
  ) { }

Answer 6

window.location.reload（）或仅location.reload（）

如何刷新角度2的页面

6 个答案: