Ik heb een routerlink gemaakt zoals hieronder. Deze routerlink laadt ProductsStartComponenten vervolgens laadt deze component verschillende andere componenten met ngif en niet via navigatie. Aangezien de link Productcategorieën hieronder zichtbaar is op alle pagina’s, dus als ik op deze link klik nadat ik een onderdeel van ngif heb bereikt, betekent dit niet dat ik terugga naar ProductsStartComponent.
Omdat ik nieuw ben bij Angular, begrijp ik dit gedrag omdat alle waarden/modellen zijn ingesteld en dat het daarom niet navigeert. Ik veronderstel dat dit kan worden bereikt door de pagina te vernieuwen of opnieuw te laden, maar hoe dat te bereiken. Gelieve te adviseren.
In admin.component.html is router Link gedefinieerd voor klikken.
retourneert
<li routerLinkActive="active"><a routerLink="categories"><p>Products Categories</p></a></li>
retouren
In app-routing.module.ts, welk onderdeel moet worden geladen door op de routerlink te klikken
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 wordt dit geladen bij de eerste klik op de routerlink. Als ik nu op de knop Bewerken klik en naar een ander onderdeel ga en nogmaals als ik op de routerlink van productcategorieën klik, gebeurt er niets, ik verwacht dat het de pagina opnieuw instelt.
<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>
Antwoord 1, autoriteit 100%
Als u de pagina opnieuw wilt laden, kunt u eenvoudig naar uw component gaan en dan doen:
location.reload();
Antwoord 2, autoriteit 20%
Voor het geval iemand anders dit probleem tegenkomt. Je moet bellen
window.location.reload()
En je kunt dit niet vanuit een uitdrukking aanroepen. Als je dit wilt aanroepen vanuit een klikgebeurtenis, moet je dit op een functie zetten:
(click)="realodPage()"
En definieer eenvoudig de functie:
reloadPage() {
window.location.reload();
}
Als u de route wijzigt, werkt dit mogelijk niet omdat de klikgebeurtenis lijkt te gebeuren voordat de route wordt gewijzigd. Een erg vuile oplossing is om gewoon een kleine vertraging toe te voegen
reloadPage() {
setTimeout(()=>{
window.location.reload();
}, 100);
}
Antwoord 3, autoriteit 12%
Bijgewerkt
Hoe u paginavernieuwing implementeert in Angular 2+ merk op dat dit binnen uw component wordt gedaan:
location.reload();
Antwoord 4, autoriteit 6%
De eenvoudigst mogelijke oplossing die ik vond was:
In uw opmaak:
<a [href]="location.path()">Reload</a>
en in uw componenttypescript-bestand:
constructor(
private location: Location
) { }
Antwoord 5, autoriteit 2%
Zonder een beetje meer code … is het moeilijk te zeggen wat er aan de hand is.
Maar als uw code er ongeveer zo uitziet:
<li routerLinkActive="active">
<a [routerLink]="/categories"><p>Products Categories</p></a>
</li>
...
<router-outlet></router-outlet>
<myComponentA></myComponentA>
<myComponentB></myComponentB>
Als u vervolgens op de routerlink klikt, wordt de route naar de categorieroute geleid en wordt het sjabloon weergegeven in de routeruitgang.
Het verbergen en tonen van de onderliggende componenten heeft geen invloed op wat wordt weergegeven in het stopcontact van de router.
Dus als u nogmaals op de link klikt, wordt de route van de categorieën al weergegeven in de routeruitgang en wordt deze niet opnieuw weergegeven/opnieuw geïnitialiseerd.
Als u iets specifieker zou kunnen zijn over wat u probeert te doen, kunnen we u specifiekere suggesties geven. 🙂
Antwoord 6
window.location.reload() of gewoon location.reload()