如何以角度2刷新页面

Posted 2023-02-19

【中文标题】如何以角度2刷新页面

【英文标题】：how to refresh page in angular 2

【发布时间】：2018-01-18 07:28:21

【问题描述】：

我创建了一个路由器链接，如下所示。此路由器链接加载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>

【问题讨论】：

你的意思是routerlink不能从其他页面工作？

您能否提供更多代码来说明您的问题？其他“页面”实际上是子组件吗？在 Angular 中，组件通常显示为子组件（使用其选择器）或路由目标（通过 routerLink 或 .navigate() 路由）。

@DeborahK 是的，我已将其他组件显示为选择器

@ZAhmed 添加了更多上下文。请看一下

【参考方案1】：

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

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

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

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

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

所以如果你再次点击链接，category route已经显示在router outlet中，不会再次显示/重新初始化。

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

【讨论】：

我正在尝试添加更多代码和上下文，但它阻止我保存编辑并要求我在我已经在编辑中添加足够的上下文时添加更多上下文:(

添加了更多上下文。请看一下

【参考方案2】：

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

location.reload();

【讨论】：

@angular/common 的提供者位置在 Angular 5+ 上没有 reload() 函数

它是纯 javascript 重新加载整个页面而不是 angular 库。

【参考方案3】：

更新

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

location.reload();

【讨论】：

来自@angular/common 的位置不提供重载功能

使用 location.reload() 破坏了 SPA 的整个想法。

【参考方案4】：

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

在您的标记中：

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

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

constructor(
        private location: Location
  )  

【参考方案5】：

以防万一其他人遇到此问题。你需要打电话

window.location.reload()

而且你不能从表达式中调用它。如果你想从点击事件中调用它，你需要把它放在一个函数上：

(click)="realodPage()"

并简单地定义函数：

reloadPage() 
   window.location.reload();

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

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

【参考方案6】：

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