如何在角度2中刷新页面

Question

我创建了一个路由器链接，如下所示。该路由器链接加载

ProductsStartComponent

，然后该组件使用 ngif 而不是通过导航加载其他几个组件。由于下面的产品类别链接在所有页面中都可见，因此如果我在到达 ngif 的某些组件后单击此链接，这不会让我返回

ProductsStartComponent

。

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

在admin.component.html中，定义了router Link用于点击。
返回

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

退货

在app-routing.module.ts中，点击router链接需要加载哪个组件

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

我发现的最简单的解决方案是：

在您的标记中：

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

在你的组件打字稿文件中：

constructor(
        private location: Location
  ) { }

Answer 5

保存或任何操作后，我使用以下代码重新加载页面

reloadCurrentRoute() {
    let currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
} 

Answer 6

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

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

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

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

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

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

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

Answer 7

在 ngOnInit 中我们可以使用 location.reload() 来重新加载页面

ngOnInit() {
    let username = 'Tom';
    if (username !== false && username !== undefined && username !== '' && username !== 'undefined') {
      this.username = username.toUpperCase();
    } else {
      location.reload();
    }

}

Answer 8

location.reload() 重新加载整个窗口 [href]。 另一种方法是通过转到另一个页面来平滑地重新加载页面，即 /tmppath/:p，以当前路径作为参数

location.pathname

然后返回当前组件。如果您有包含其他组件的模板或布局组件，则该方法可能适合。

另一种方法也是直接调用初始化函数，即

this.ngAfterContentInit()

愿它对某人有帮助。 谢谢

Answer 9

window.location.reload() 或只是 location.reload()