web-dev-qa-db-fra.com

comment actualiser la page dans angular 2

J'ai créé un lien de routeur comme ci-dessous. Ce lien de routeur charge ProductsStartComponent, puis ce composant charge plusieurs autres composants à l’aide de ngif et non via la navigation. Comme le lien ci-dessous relatif aux catégories de produits est visible dans toutes les pages, donc si je clique sur ce lien après avoir atteint un composant de ngif, cela ne me ramène pas à ProductsStartComponent.

Comme je suis nouveau sur Angular, si je comprends bien, c’est parce que toutes les valeurs/modèles sont définis et que c’est pourquoi il ne navigue pas. Je suppose que cela peut être réalisé par un rafraîchissement ou un rechargement de page, mais comment pour y parvenir.

Dans admin.component.html, le lien du routeur est défini pour cliquer.
résultats

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

résultats

Dans app-routing.module.ts, quel composant doit être chargé en cliquant sur le lien du routeur

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

Dans product-start.component.html, il est chargé au premier clic sur le lien du routeur. Maintenant, si je clique sur le bouton Modifier et que je passe à un autre composant, et si je clique sur le lien du routeur de catégories de produits, rien ne se passe, je m'attends à ce qu'il réinitialise la 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>
angularangular-ui-router
18
user2800089

Si vous souhaitez recharger la page, vous pouvez facilement accéder à votre composant, puis procédez comme suit:

location.reload();
25
ZAhmed

Mis à jour

Comment implémenter l'actualisation de page dans Angular 2+ notez que cela est fait dans votre composant:

location.reload();
2
theTechRebel

Sans un peu plus de code ... il est difficile de dire ce qui se passe.

Mais si votre code ressemble à quelque chose comme ceci:

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

Cliquez ensuite sur le lien du routeur pour accéder à la route des catégories et afficher son modèle dans la prise du routeur.

Le masquage et l'affichage des composants enfants n'affectent pas ce qui est affiché dans la prise du routeur.

Ainsi, si vous cliquez à nouveau sur le lien, la route des catégories est déjà affichée dans la prise du routeur et il ne s'affichera/ne sera pas réinitialisé à nouveau.

Si vous pouviez être un peu plus précis sur ce que vous essayez de faire, nous pourrions vous fournir des suggestions plus précises. :-)

1
DeborahK

La solution la plus simple possible que j'ai trouvée était:

Dans votre balisage:

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

et dans votre fichier TypeScript composant:

constructor(
        private location: Location
  ) { }
1
mrkernelpanic