Winkel-5 routing auf die gleichen Komponenten, aber unterschiedliche param, funktioniert nicht

Habe ich Winkel-5 basic Anfänger app
es gibt nur 5 Komponenten

meine routing und links so Aussehen

//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 nur funktionieren, wenn es geht um verschiedene Komponente,

bedeutet, ich kann navigieren Sie von der Startseite zu /items/2

aber wenn ich in der Artikel-Komponente kann ich navigieren Sie zu /items/any-parameter

obwohl von Dingen, auf die ich gehen kann, zu Hause oder Einstellungen der Komponente.

kurz, es ist nun daran, navigieren Sie zu derselben Komponente, auch wenn parameter anders ist.
Winkel-5 routing auf die gleichen Komponenten, aber unterschiedliche param, funktioniert nicht

Ich bemerkte eine Sache, die URL ist immer verändert aber Inhalt der Seite ist die gleiche wie die alte Seite nicht Neuladen neue url 🙁

  • geben Sie Details zu Ihrer Frage. Ich bin nicht immer das, was Sie sagen
  • Verwenden Sie keine spezifischen params, sondern optional params wie hier : [routerLink]=['/items', {param1:'test'}] die route wird wie folgt Aussehen : /Artikel;param1=test . Sie müssen nur angeben, 'items' ohne Parameter auf Ihre routing
  • ich versuchte Ihre Methode, es zu sagen: Nicht alle Routen. URL-Segment: 'Elemente/2'
  • Mit besser Lesen deiner Frage, meine Antwort war nicht das, was Sie brauchen. Ist die Seite die gleichen wie vor dem ändern der parameter ? Wie nimmst du die id ? Ich denke, das ist möglich, dass die Komponente nicht neu erstellt, aber geben lediglich ein Ereignis, das Parameter verändert. Tun Sie abonnieren params ?
  • items Komponenten aufrufen von web service-mit der dynamischen parameter (1,2...9) gibt die Liste der fruits, sweets, vegitables etc auf der Grundlage dieser params
  • Was meinst du mit funktioniert nicht? Werden Sie sagen, dass Ihre ngOnInit code wird nicht ausgeführt wieder?
  • ja du hast Recht, ich tippte console.log(this.cat) innen ngOnInint() es wird nicht ausgeführt, nur wenn ich schon in der Artikel-Komponente.

InformationsquelleAutor alamnaryab | 2018-04-09
  1. 13

    So, der beste Weg ist, mit abonnieren für route:

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

    Danach müssen Sie sich Abmelden:

    ngOnDestroy(): void {
        this.userSubscription.unsubscribe()
}
    InformationsquelleAutor Mohammad Hossein Ganjyar
  2. 5

    Ich weiß, das ist ein wenig spät, aber ich lief einfach in das gleiche Problem und eine Lösung gefunden. Sie sind mit this.route.snapshot.params um den id-parameter. Pro der Angular-Dokumentation, nur die snapshot-wenn Ihre Komponente Instanz wird niemals wiederverwendet werden. Snapshot stellt nur den ersten Wert der parameter der route anzeigen und wird nicht aktualisiert, wenn die Komponente wiederverwendet wird. Dies bedeutet, dass wenn Sie die route zu einer Komponente nach id und dann (während der Anzeige-Komponente) versuchen Weg zu einer neuen Instanz derselben Komponente mit einer anderen id, die erste Komponente wiederverwendet wird, aber die Daten werden nicht aktualisiert, weil ngOnInit() wird nicht ein zweites mal aufgerufen.

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

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

    Verwenden Sie dieses format;

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

    Den this.route.paramMap ist zurück von einem Beobachtbaren, die

    "impliziert, dass die parameter der route anzeigen kann sich ändern während der Laufzeit
    diese Komponente".

    Wirst du wahrscheinlich ändern müssen, um andere Teile des Codes, um die Arbeit mit den Beobachtbaren (cat$), aber da sehe ich nur ein Teil des Codes kann ich nicht raten, auf andere änderungen. In der Dokumentation unten gibt es eine Projekt-Datei (Helden-detail.Komponente.ts) am Ende von Meilenstein 3 zeigt, wie dies funktioniert.

    Lesen Sie die offizielle Dokumentation ist hier;

    Angular2+ Beobachtbaren paramMap und Wiederverwendung von Komponenten

    Hoffe, das hilft, und happy coding!

    InformationsquelleAutor HombreLoco
  3. 2

    Beim navigieren auf der gleichen Komponente, Eckig ist nicht neu Feuer Ihre ngOnInit() Methode. Um Ihren code zu arbeiten, arbeiten Sie mit einer version von der route Parameter, die eine beobachtbare und zum abonnieren von änderungen auf, die. Stellen Sie sicher, Sie Lesen über die Winkel-Docs über routing. Sie haben eine Reihe von hilfreichen Informationen in es.

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

    Müssen Sie sicherstellen, dass Sie den Newsletter abbestellen Abonnement, wenn Sie navigieren Weg von dieser Komponente. Hier ist eine Diskussion auf die besten Praktiken auf, wie es zu tun.

    InformationsquelleAutor Daniel W Strimpel
  4. 1

    Habe ich auch vor diesem problem, während Sie mein Projekt die besten, um loszuwerden, die Fehler zu verwenden ist abonnieren für die route und als Ondestroy-Schnittstelle für die Abmeldung einer Veranstaltung

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

    //danach müssen Sie unsbscribe

        ngOnDestroy(){
    }
    InformationsquelleAutor Shubham Singh
  5. 0

    Ich denke, das ist die beste Lösung 

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

    Den router nur zerstört und neu erstellt die Komponente, wenn es navigiert auf eine andere route. Wenn nur der Weg params oder query-Parameter werden aktualisiert, aber die route ist die gleiche, die Komponente wird nicht zerstört und neu erstellt.
    Froh zu hören, wenn geholfen.

    InformationsquelleAutor Pullat Junaid
  6. 0

    Wenn Sie versuchen, die route, um die gleiche Komponente mit verschiedenen route param. Dieser arbeitete für mich. 

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