webentwicklung-frage-antwort-db.com.de

So aktualisieren Sie die Seite in angular 2

Ich habe eine Router-Verbindung wie unten erstellt. Diese Router-Verbindung lädt ProductsStartComponent und dann lädt diese Komponente mehrere andere Komponenten mit ngif und nicht über die Navigation. Da der Link "Produktkategorien" auf allen Seiten sichtbar ist, führt mich der Klick auf diesen Link nicht zurück zu "ProductsStartComponent", nachdem ich eine Komponente von "ngif" erreicht habe.

Da ich neu in Angular bin, ist mein Verständnis für dieses Verhalten, dass alle Werte/Modelle festgelegt sind und deshalb nicht navigiert wird. Ich nehme an, dies kann durch Aktualisieren oder Neuladen der Seite erreicht werden, aber wie um das zu erreichen. Bitte beraten.

In admin.component.html wird der Router-Link zum Klicken definiert.
kehrt zurück

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

kehrt zurück

In app-routing.module.ts, welche Komponente beim Klicken auf den Router-Link geladen werden muss

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 wird dies beim ersten Klicken auf den Router-Link geladen. Wenn ich nun auf die Schaltfläche "Bearbeiten" klicke und zu einer anderen Komponente wechsle und erneut auf den Link "Produktkategorien Router" klicke, passiert nichts. Ich erwarte, dass die Seite zurückgesetzt wird.

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

Wenn Sie die Seite neu laden möchten, können Sie einfach zu Ihrer Komponente gehen und dann Folgendes tun:

location.reload();
25
ZAhmed

Aktualisiert

So implementieren Sie die Seitenaktualisierung in Angular 2+) Beachten Sie, dass dies in Ihrer Komponente erfolgt:

location.reload();
2
theTechRebel

Ohne ein bisschen mehr Code ist es schwer zu sagen, was los ist.

Aber wenn Ihr Code ungefähr so ​​aussieht:

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

Wenn Sie dann auf den Router-Link klicken, wird die Route zu den Kategorien weitergeleitet und die Vorlage im Router-Ausgang angezeigt.

Das Ausblenden und Verbergen der untergeordneten Komponenten wirkt sich nicht auf die Anzeige im Router-Ausgang aus.

Wenn Sie also erneut auf den Link klicken, wird die Kategorienroute bereits im Router-Ausgang angezeigt und wird nicht erneut angezeigt/initialisiert.

Wenn Sie etwas genauer wissen möchten, was Sie versuchen, können wir Ihnen spezifischere Vorschläge unterbreiten. :-)

1
DeborahK

Die einfachste Lösung, die ich gefunden habe, war:

In Ihrem Markup:

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

und in Ihrer TypeScript-Komponentendatei:

constructor(
        private location: Location
  ) { }
1
mrkernelpanic