how to refresh page in angular 2

Question

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>

Answer 1

Updated

How to implement page refresh in Angular 2+ note this is done within your component:

location.reload();

Answer 2

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

location.reload();

Answer 3

Without a bit more code ... its hard to say what's going on.

But if your code looks something like this:

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

Then clicking on the router link will route to the categories route and display its template in the router outlet.

Hiding and showing the child components don't affect what is displayed in the router outlet.

So if you click the link again, the categories route is already displayed in the router outlet and it won't display/re-initialize again.

If you could be a bit more specific about what you are trying to do, we could provide more specific suggestions for you. :-)

Answer 4

The simplest possible solution I found was:

In your markup:

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

and in your component typescript file:

constructor(
        private location: Location
  ) { }