如何刷新角度2的页面

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)="realodPage()"

并简单地定义函数：

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

如果您正在更改路线，它可能不起作用，因为单击事件似乎发生在路线更改之前。一个很脏的解决方案就是增加一个小的延迟

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

Answer 3

更新

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

location.reload();

Answer 4

如果没有更多的代码......很难说发生了什么。

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

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

然后点击路由器链接将路由到类别路由并在路由器出口中显示其模板。

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

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

如果您可以更具体地说明您想要做什么，我们可以为您提供更具体的建议。:-)