Wie zu verwenden ActivatedRoute im Winkel 5?

Ich versuche zu tun, ist genau das gleiche wie in diesem Beitrag: Winkel 4 bekommen queryString

Ich bin mit Eckigen 5.2.5.

ActivatedRoute scheint die Sache zu sein, zu verwenden, um querystring Werte aus der URL, wenn der Benutzer die website besucht. Allerdings bin ich nicht in der Lage, um herauszufinden, was ich brauche, um zu importieren, um in der Lage sein zu verwenden ActivatedRoute.

Könnte mir jemand genau angeben, was Hinzugefügt werden muss, um die app.- Modul.ts-Datei, und der Komponente.ts-Datei, wo ich bin versucht, ActivatedRoute?

Dieser Beitrag gibt das hinzufügen von routing auf die Einfuhren array @NgModule: Keine Anbieter für ActivatedRoute - Winkel 2 RC5. Allerdings habe ich nicht eine app.routing.ts-Datei. Muss ich eine app erstellen.routing.ts-Datei zu verwenden ActivatedRoute?

InformationsquelleAutor Mark Nugent | 2018-05-03
  1. 2

    Machte ich die beiden änderungen Arun vorgeschlagen. Dann, zu beheben die "Kein Anbieter für ActivatedRoute" Fehler, die ich gemacht die änderungen, die nachfolgend dargestellt.

    1) ich habe diese Zeile in die app.- Modul.ts:

    import { RouterModule } from '@angular/router';

    2) ich habe diese Zeile, um die Importe array @NgModule in der app.- Modul.ts:

    RouterModule.forRoot([])

    Dieser Artikel gab mir den fix: Winkel-Fehler: kein provider für ActivatedRoute

    Nun kompiliert. Hurra!

    InformationsquelleAutor Mark Nugent
  2. 2

    ActivatedRoute Enthält die Informationen zu einer route verbunden mit einer Komponente laden in eine Steckdose.
    Es kann auch verwendet werden, um die übergabe von Daten aus one component zu another component mit route wie Id, flag, Status etc.

    http://localhost:4200/quiz/edit_quiz/032

    032 wird id des quiz Sie wollen, Bearbeiten.

    Erhalten Sie diese id in der Komponente(in meinem Fall lass es sein edit_quiz.compontent.ts) zu verwenden, durch die Verwendung von Aktivierten Route.

    Schritt 1: Import ActivatedRoute von Router-Modul.

    import { ActivatedRoute } from '@angular/router';

    Schritt 2: Injizieren ActivatedRoute im Konstruktor.

      constructor(private activatedRoute: ActivatedRoute) { }

    Schritt 3: Get id auf eine lokale variable namens quizId im ngOnInit(){}

       ngOnInit() {
    this.quiz_id = this.activatedRoute.snapshot.params['id'];
   }

    Nun haben wir die id in edit_quiz.component.ts zu verwenden.

    InformationsquelleAutor Mr. Droid
  3. 1

    Müssen Sie es importieren ActivatedRoute von @Winkel/router wie

    import { ActivatedRoute } from '@angular/router';

    dann fügen Sie diese Zeile, um die Importe array @NgModule in der app.- Modul.ts:

    imports:[
        ........,
        RouterModule.forRoot()
],

    dann können Sie verwenden, wo jeder als unten:

    constructor(private route: ActivatedRoute) {
     console.log(route.snapshot.queryParamMap); //this
}
//or
queryString : string;
getQueryString(){
   this.queryString = this.route.queryParamMap.get('myQueryParam');
}

    Nicht. Sie brauchen keine app.routing.ts, wenn Sie nicht haben, um durch die Seiten navigieren innerhalb der app.

    • Also ich habe die import-Zeile und der parameter des Konstruktors auf meine Komponente.ts-Datei, aber jetzt bekomme ich diese Fehlermeldung: FEHLER: StaticInjectorError(AppModule)[SubmitPaymentComponent -> ActivatedRoute]: StaticInjectorError(Plattform: Kern)[SubmitPaymentComponent -> ActivatedRoute]: NullInjectorError: Kein Anbieter für ActivatedRoute!
    • ohh sorry, ich vergaß zu sagen über den provider.. Sie fanden es heraus, indem Sie sich selbst.. das ist toll !!!
    InformationsquelleAutor Arun Amatya
  4. 0

    ActivatedRoute

    Ich bin spät, um das Gespräch, sondern hoffe, dass die folgenden arbeiten für die Zukunft-Programmierer, die das gleiche Problem begegnen.

    importieren Sie die ActivatedRoute

    import { ActivatedRoute } from '@angular/router';

    Inject dependency injection 

    constructor(
    private route: ActivatedRoute,
  ) { }

    und zu greifen, die id aus dem link können Sie die folgenden 

      ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.product = products[+params.get('productId')];
  });
}
    InformationsquelleAutor Mickey Mouse
Schreibe einen Kommentar