webentwicklung-frage-antwort-db.com.de

Laden Sie eine Komponente mit unterschiedlichen Routenparametern in angle4

Ich benutze das Angle2 Routing. Wenn der Benutzer den Wert erneut in das Suchfeld eingibt und auf Suchen klickt, muss dieselbe Komponente erneut geladen werden, jedoch mit anderen Routenparametern.

<button (click)="onReload()">Search</button>

onReload() {
this.router.navigate(['results',this.location]);
}

Dies ist mein Routenpfad für meine ResultsComponent

{ path:'results/:location', component:ResultsComponent}

Diese Funktion ändert die URL, aber die Komponente wird nicht erneut initialisiert.

In eckjs, ui-router könnte ich es so erreichen.

$state.go($state.current, location, {reload: true});

Wie mache ich das in angle4?

6
CKA

Sie müssen die Initialisierungslogik innerhalb der Subskriptionsrückruffunktion innerhalb der Subskriptionsrückruffunktion des beobachtbaren Streams route.params ausführen.

In Ihrer Komponentenklasse

@Component({
  ...
})
export class MyComponent implements OnInit {

   myLocation:string;

   constructor(private route:ActivatedRoute) {}

   ngOnInit() {
     this.route.params.subscribe((params:Params) => {
        this.myLocation = params['location'];
        // -- Initialization code -- 
        this.doMyCustomInitialization();
     }
   }

   private doMyCustomInitialization() {
       console.log(`Reinitializing with new location value ${this.location}`);
   }
}

Anders ausgedrückt: Wenn Sie Daten basierend auf dem Wert von 'location' auflösen müssen, sollten Sie einen Auflösungs-Guard verwenden, der die Daten auflöst, bevor die Komponente erstellt wird. Unter https://angular.io/guide/router#resolve-guard finden Sie weitere Informationen zu Auflösungsschutz und Routen.

Hier ist ein funktionierendes Plunkr. https://plnkr.co/edit/g2tCnJ?p=preview

2
JeanPaul A.

BEARBEITET

Der eckige Weg, dem Router dies mitzuteilen, besteht darin, onSameUrlNavigation ab dem Winkel 5.1 zu verwenden

Aber ich musste dieses Problem auf andere Weise lösen ( Stackblitz ), durch subscribing in route events und tatsächlich einen custom reInit method aufrufen. 

Der Trick besteht darin, alle Subskriptionen zu demselben Objekt hinzuzufügen und dann NUR abzubestellen, wenn ngOnDestroy von angle aufgerufen wird und der Rest Ihrer Vorlagen-Vars sich vom custom destroy method... ändert.

    public subscribers: any = {};

    constructor(private router: Router) {
    /** 
      * This is important: Since this screen can be accessed from two menu options 
      * we need to tell angular to reload the component when this happens.
      * It is important to filter the router events since router will emit many events,
      * therefore calling reInitComponent many times wich we do not want.
      */   
      this.subscribers._router_subscription = this.router.events.filter(evt => evt instanceof NavigationEnd).subscribe((value) => { 
        this.reInitComponent();
      });
    }

    reInitComponent() {
        this.customOnDestroy();
        this.customOnInit();
    }

    customOnInit() {
        // add your subscriptions to subscribers.WHATEVERSUB here
        // put your ngOnInit code here, and remove implementation and import 
    }

    customOnDestroy() {
      // here goes all logic to re initialize || modify the component vars  
    }

    /**
     * onDestroy will be called when router changes component, but not when changin parameters ;)
     * it is importatn to unsubscribe here
     */
     ngOnDestroy() {  
       for (let subscriberKey in this.subscribers) {
          let subscriber = this.subscribers[subscriberKey];
          if (subscriber instanceof Subscription) {
            subscriber.unsubscribe();
          }
        }
     }

Wenn Sie lifecylce hook ngOnInit implementieren, sollten Sie es entfernen und eine benutzerdefinierte Methode wie im Beispiel implementieren.

Ich habe die unsubscription-Methode wegen this angle-Fehlers hinzugefügt. Angular sollte sich bei der Zerstörung der Komponente tatsächlich automatisch von router.events abmelden. Da dies jedoch nicht der Fall ist, werden am Ende http-Anfragen so oft wie Sie aufgerufen, wenn Sie sie nicht manuell abbestellen die Komponente eingegeben.

2
FRECIA

https://angular-2-training-book.rangle.io/handout/routing/routeparams.html

In Ihrer Komponente müssen Sie die Parameter abonnieren, um festzustellen, ob sie geändert wurden.

1
Justin