it-swarm.com.de

winkel 5 Routing zur gleichen Komponente, aber unterschiedlichen Parametern, funktioniert nicht

Ich habe 5 grundlegende Anfänger-Level-App Es gibt nur 5 Komponenten

mein Routing und meine Links sehen so aus

//copied from app.module.ts
const appRoutes:Routes = [
  {path:'',component:HomeComponent},
  {path:'items/:cat',component:ItemsComponent},
  {path:'itemdetail/:id',component:ItemdetailComponent},
  {path:'settings',component:SettingsComponent},
];

//copied from navbar.component.html
<ul>
      <li><a [routerLink]="['/']">Home</a></li>
      <li><a [routerLink]="['/items/8']">Rashion</a></li>
      <li><a [routerLink]="['/items/2']">Vegitables</a></li>
      <li><a [routerLink]="['/items/3']">Fruits</a></li>
      <li><a [routerLink]="['/items/7']">Other</a></li>
      <li><a [routerLink]="['/items/5']">Sweets</a></li>
      <li><a [routerLink]="['/settings']">Settings</a></li>          
</ul>

//copied from items.component.ts
ngOnInit(){
    this.cat = this.route.snapshot.params['cat'];
    this.itemsSrv.getItems(this.cat)
            .subscribe((data)=>{
                this.items=data;
            });
}

links funktionieren nur, wenn es sich um eine andere Komponente handelt,
bedeutet, dass ich von der Startseite zu /items/2 navigieren kann.
aber wenn ich in der Elementkomponente bin, kann ich zu /items/any-parameter navigieren.
obwohl von Items kann ich nach Hause oder Einstellungskomponente gehen.
Kurz gesagt, funktioniert es jetzt, um zu derselben Komponente zu navigieren, auch wenn der Parameter anders ist .  enter image description here

Eines ist mir aufgefallen: Die URL wird geändert, der Inhalt der Seite ist jedoch der alte Seite, die die neue URL nicht neu lädt :(

6
alamnaryab

Am besten verwenden Sie subscribe for route

userSubscription: Subscription;
...
ngOnInit() {
   this.userSubscription = this.route.params.subscribe(
            (params: Params) => {
                 //------ some code -----
   })
}

Danach müssen Sie den Newsletter abbestellen:

ngOnDestroy(): void {
        this.userSubscription.unsubscribe()
}

Ich weiß, dass dies etwas spät ist, aber ich bin gerade auf das gleiche Problem gestoßen und habe eine Lösung gefunden. Sie verwenden this.route.snapshot.params, um den id-Parameter abzurufen. Verwenden Sie gemäß der Angular-Dokumentation nur Momentaufnahmen, wenn Ihre Komponenteninstanz niemals wiederverwendet wird. Die Momentaufnahme stellt nur den Anfangswert der Routenparameterkarte bereit und wird nicht aktualisiert, wenn die Komponente erneut verwendet wird. Das bedeutet, wenn Sie eine Route über eine ID an eine Komponente weiterleiten und dann (während diese Komponente angezeigt wird) versuchen, eine neue Instanz derselben Komponente mit einer anderen ID zu routen, wird die ursprüngliche Komponente wiederverwendet. Die Daten werden jedoch nicht aktualisiert, da ngOnInit () wird nicht ein zweites Mal aufgerufen.

Um das Problem zu beheben, müssen Sie es ändern.

this.cat = this.route.snapshot.params['cat'];

Um dieses Format zu verwenden;

ngOnInit() {
  this.cat$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.itemsSrv.getItems(params.get('id')))
  );
}

Der this.route.paramMap wird von einem Observable zurückgegeben, welches 

msgstr "impliziert, dass sich die Routenparameterzuordnung während der Lebensdauer dieser Komponente ändern kann ".

Sie müssen wahrscheinlich andere Teile Ihres Codes ändern, um mit Observable (cat $) arbeiten zu können. Da ich jedoch nur einen Teil Ihres Codes sehen kann, kann ich nicht auf andere Änderungen hinweisen. In der folgenden Dokumentation finden Sie eine Projektdatei (hero-detail.component.ts) am Ende von Milestone 3, die zeigt, wie dies funktioniert.

Sie können die offizielle Dokumentation hier lesen.

Angular2 + Observable paramMap und Wiederverwendung von Komponenten

Hoffe das hilft und fröhliche Codierung!

2
HombreLoco

Wenn Sie zu derselben Komponente navigieren, löst Angular Ihre ngOnInit()-Methode nicht erneut aus. Damit Ihr Code funktioniert, müssen Sie mit einer Version der route-Parameter arbeiten, die beobachtbar sind, und Änderungen daran abonnieren. Lesen Sie die Angular Docs über das Routing durch. Dort gibt es eine Menge hilfreicher Informationen.

ngOnInit(){
    this.route.paramMap
        .switchMap(params => this.itemsSrv.getItems(params.get('cat')))
        .subscribe(data => {
            this.items=data;
        });
}

Sie müssen sicherstellen, dass Sie sich von diesem Abonnement abmelden, wenn Sie von dieser Komponente weg navigieren. Hier ist eine Diskussion über die besten Vorgehensweisen.

2

Ich denke, das ist die beste Lösung

constructor(route:ActivatedRoute) {
 route.params.subscribe(val => {
 // put the code from `ngOnInit` here
  });
}

Der Router zerstört die Komponente nur dann und erstellt sie neu, wenn er zu einer anderen Route navigiert. Wenn nur Routenparameter oder Abfrageparameter aktualisiert werden, die Route jedoch identisch ist, wird die Komponente nicht zerstört und neu erstellt. Freut mich zu hören, wenn geholfen wird.

0
Pullat Junaid

Wenn Sie versuchen, mit verschiedenen Routenparametern zur gleichen Komponente zu routen. Das hat bei mir funktioniert.

 getConsingmentwithId(id: number){
    this.router.navigate(['component', id], {relativeTo: this.route.parent});
  }
0
N Deol

Ich habe auch dieses Problem, während ich mein Projekt am besten durchführe, um diesen Fehler zu beseitigen. Verwenden Sie subscribe for route und dann Ondestroy interface, um ein Ereignis abzubestellen

    ngOnInit{
       this._router.params.subscribe(param =>{
            // write some code
           let cat=this._router.snapshot.paramMap.get('cat');
          });
}

// danach musst du dich abmelden

    ngOnDestroy(){
    }
0
Shubham Singh