如何以角度2刷新页面 [英] how to refresh page in angular 2

查看:12
本文介绍了如何以角度2刷新页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我创建了一个路由器链接,如下所示.此路由器链接加载 ProductsStartComponent,然后此组件使用 ngif 而不是通过导航加载其他几个组件.由于下面的产品类别链接在所有页面中都可见,所以如果我在到达 ngif 的某些组件后单击此链接,这不会让我回到 ProductsStartComponent.

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

在 admin.component.html 中,定义了路由链接以供点击.
返回

<li routerLinkActive="active"><a routerLink="categories"><p>产品分类</p></a></li>

返回

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

const appRoutes: Routes = [{路径:'admin',组件:AdminComponent,孩子:[{ 路径:仪表板",组件:AdminDashboardComponent },{ 路径:卖家",组件:AdminSellersComponent },{路径:'类别',组件:ProductsStartComponent}]}]

在 product-start.component.html 中,这是在第一次单击路由器链接时加载的.现在,如果我单击编辑按钮并移动到其他组件,然后再次单击产品类别路由器链接,则没有任何反应,我希望它会重置页面.

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

解决方案

如果你想重新加载页面,你可以很容易地转到你的组件然后这样做:

location.reload();

I have created one router link as below. This router link loads ProductsStartComponent and then this component loads several other components using ngif and not via navigation. Since below Product categories link is visible in all pages so if I am clicking on this link after reaching to some component of ngif , this is not taking me back on ProductsStartComponent.

As I am new to Angular , my understanding for this behavior is because all values/models are set and that's why it's not navigating. I suppose this can be achieved by refresh or reload of page but how to achieve that. Please advise.

In admin.component.html, router Link is defined for clicking.
returns

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

returns

In app-routing.module.ts, which component need to be loaded on clicking of router link

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

In product-start.component.html, this is being loaded on first click on router link. Now if I click on edit button and moved to other component and again if i click on product categories router link , nothing happen , I am expecting it to reset the page.

<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>

解决方案

If you want to reload the page , you can easily go to your component then do :

location.reload();

这篇关于如何以角度2刷新页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆