it-swarm.com.de

Wie werden die Abfrageparameter in Winkel 2 behandelt?

In meinem routable component habe ich 

@RouteConfig {
  {path: '/login',   name: 'Login', component: LoginComponent}
}  

Aber wie bekomme ich die Abfrageparameter, wenn ich zu app_url/login?token=1234 gehe?

59
monty_lennie

Als Ergänzung zu den beiden vorherigen Antworten unterstützt Angular2 sowohl Abfrageparameter als auch Pfadvariablen im Routing. Wenn Sie in @RouteConfig definition Parameter innerhalb eines Pfads definieren, werden diese von Angular2 als Pfadvariablen und als Abfrageparameter behandelt.

Nehmen wir eine Probe:

@RouteConfig([
  { path: '/:id', component: DetailsComponent, name: 'Details'}
])

Wenn Sie die navigate-Methode des Routers wie folgt aufrufen:

this.router.navigate( [
  'Details', { id: 'companyId', param1: 'value1'
}]);

Sie haben folgende Adresse: /companyId?param1=value1. Die Methode zum Abrufen von Parametern ist für Abfrageparameter und Pfadvariablen gleich. Der Unterschied besteht darin, dass Pfadvariablen als obligatorische Parameter und Abfrageparameter als optionale Parameter angesehen werden können.

Ich hoffe, es hilft dir. Thierry

UPDATE: Nach Änderungen in Router alpha.31 funktionieren HTTP-Abfrageparameter nicht mehr ( Matrixparameter # 2774 ). Stattdessen verwendet der Winkelrouter die so genannte Matrix-URL-Notation.

Referenz https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters

Die optionalen Routenparameter sind nicht durch "?" Getrennt. und "&" wie sie wäre in der URL-Abfragezeichenfolge. Sie sind durch Semikolons ";" .__ getrennt. Dies ist eine Matrix-URL-Schreibweise, die Sie möglicherweise noch nicht gesehen haben.

44

RouteParams sind nun veraltet. Also, wie geht das im neuen Router?.

this.router.navigate(['/login'],{ queryParams: { token:'1234'}})

Und dann in der Login-Komponente können Sie den Parameter übernehmen,

constructor(private route: ActivatedRoute) {}
ngOnInit() {
    // Capture the token  if available
    this.sessionId = this.route.queryParams['token']

}

Hier ist die Dokumentation 

40

Es scheint, dass RouteParams nicht mehr existiert und durch ActivatedRoute ersetzt wird. ActivatedRoute gibt uns Zugriff auf die Matrix-URL-Notationsparameter. Wenn Sie die Abfragezeichenfolge ?-Parameter benötigen, müssen Sie Router.RouterState verwenden. Die traditionellen Parameter für die Abfragezeichenfolge bleiben über das Routing hinweg erhalten, was möglicherweise nicht das gewünschte Ergebnis ist. Das Beibehalten des Fragments ist jetzt in Router 3.0.0-rc.1 optional.

import { Router, ActivatedRoute } from '@angular/router';
@Component ({...})
export class paramaterDemo {
  private queryParamaterValue: string;
  private matrixParamaterValue: string;
  private querySub: any;
  private matrixSub: any;

  constructor(private router: Router, private route: ActivatedRoute) { }
  ngOnInit() {
    this.router.routerState.snapshot.queryParams["queryParamaterName"];
    this.querySub = this.router.routerState.queryParams.subscribe(queryParams => 
      this.queryParamaterValue = queryParams["queryParameterName"];
    );

    this.route.snapshot.params["matrixParameterName"];
    this.route.params.subscribe(matrixParams =>
      this.matrixParamterValue = matrixParams["matrixParameterName"];
    );
  }

  ngOnDestroy() {
    if (this.querySub) {
      this.querySub.unsubscribe();
    }
    if (this.matrixSub) {
      this.matrixSub.unsubscribe();
    }
  }
}

Wir sollten in der Lage sein, die ?-Notation während der Navigation sowie die ;-Notation zu manipulieren, aber ich bekam nur die Matrixnotation, um zu funktionieren. Das plnker , das an die neueste Router-Dokumentation angehängt ist zeigt, dass es so aussehen sollte.

let sessionId = 123456789;
let navigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);
19
Stephen

Das funktionierte für mich (ab Angular 2.1.0):

constructor(private route: ActivatedRoute) {}
ngOnInit() {
  // Capture the token  if available
  this.sessionId = this.route.snapshot.queryParams['token']

}
15
brando

Angular2 v2.1.0 (stabil):

Die ActivatedRoute bietet ein beobachtbares Abonnement.

  constructor(
     private route: ActivatedRoute
  ) { }

  this.route.params.subscribe(params => {
     let value = params[key];
  });

Dies wird jedes Mal ausgelöst, wenn die Route aktualisiert wird:/home/files/123 ->/home/files/321

4
marcel

(Für Childs Route nur wie/hallo-world)

Falls Sie diese Art von Anruf tätigen möchten:

/ hallo-world? foo = bar & fruit = banane

Angular2 verwendet nicht? noch & aber ; stattdessen. Die korrekte URL sollte also lauten:

/ hallo-world; foo = bar; frucht = banane

Und um diese Daten zu erhalten: 

import { Router, ActivatedRoute, Params } from '@angular/router';

private foo: string;
private fruit: string;

constructor(
  private route: ActivatedRoute,
  private router: Router
  ) {}

ngOnInit() {
  this.route.params.forEach((params: Params) => {
      this.foo = params['foo'];
      this.fruit = params['fruit'];
  });
  console.log(this.foo, this.fruit); // you should get your parameters here
}

Quelle: https://angular.io/docs/ts/latest/guide/router.html

4
Wetteren Rémi

Für Winkel 4  

URL:

http://example.com/company/100

Routerpfad:  

const routes: Routes = [
  { path: 'company/:companyId', component: CompanyDetailsComponent},

]

Komponente:

@Component({
  selector: 'company-details',
  templateUrl: './company.details.component.html',
  styleUrls: ['./company.component.css']
})
export class CompanyDetailsComponent{
   companyId: string;

   constructor(private router: Router, private route: ActivatedRoute) {
          this.route.params.subscribe(params => {
          this.companyId = params.companyId;
          console.log('companyId :'+this.companyId);
     }); 
  }
}

Konsolenausgabe:

companyId: 100

2
Amir

Winkel 4:

Ich habe JS (für OGs) und TS-Versionen unten aufgeführt.

.html

<a [routerLink]="['/search', { tag: 'fish' } ]">A link</a>

Im obigen Abschnitt verwende ich das link parameter array siehe Quellen unten für weitere Informationen. 

routing.js

(function(app) {
    app.routing = ng.router.RouterModule.forRoot([
        { path: '', component: indexComponent },
        { path: 'search', component: searchComponent }
    ]);
})(window.app || (window.app = {}));

searchComponent.js

(function(app) {
    app.searchComponent =
        ng.core.Component({
            selector: 'search',
                templateUrl: 'view/search.html'
            })
            .Class({
                constructor: [ ng.router.Router, ng.router.ActivatedRoute, function(router, activatedRoute) {
                // Pull out the params with activatedRoute...
                console.log(' params', activatedRoute.snapshot.params);
                // Object {tag: "fish"}
            }]
        }
    });
})(window.app || (window.app = {}));

routing.ts (Auszug)

const appRoutes: Routes = [
  { path: '', component: IndexComponent },
  { path: 'search', component: SearchComponent }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
  ],
  ...
})
export class AppModule { }

searchComponent.ts

import 'rxjs/add/operator/switchMap';
import { OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

export class SearchComponent implements OnInit {

constructor(
   private route: ActivatedRoute,
   private router: Router
) {}
ngOnInit() {
    this.route.params
      .switchMap((params: Params) => doSomething(params['tag']))
 }

Weitere Infos:

"Link Parameter Array" https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array

"Aktivierte Route - One-Stop-Shop für Routeninformationen" https://angular.io/docs/ts/latest/guide/router.html#!#activated-route

2
Ally

In Angular 6 habe ich diesen einfacheren Weg gefunden:

navigate(["/yourpage", { "someParamName": "paramValue"}]);

Dann können Sie im Konstruktor oder in ngInit direkt Folgendes verwenden:

let value = this.route.snapshot.params.someParamName;
1
Andrew

Der einfache Weg, dies in Angular 7+ zu tun, ist:

Definieren Sie einen Pfad in Ihrem? -Routing-Modul

{ path: '/yourpage', component: component-name }

Importieren Sie das ActivateRoute- und Router-Modul in Ihre Komponente und fügen Sie sie in den Konstruktor ein

contructor(private route: ActivateRoute, private router: Router){ ... }

Abonnieren Sie die ActivateRoute für ngOnInit

ngOnInit() {

    this.route.queryParams.subscribe(params => {
      console.log(params);
      // {page: '2' }
    })
}

Stellen Sie es einem Link zur Verfügung:

<a [routerLink]="['/yourpage']" [queryParams]="{ page: 2 }">2</a>
1
Fortedx

Laut Angular2-Dokumentation sollten Sie Folgendes verwenden:

@RouteConfig([
   {path: '/login/:token', name: 'Login', component: LoginComponent},
])

@Component({ template: 'login: {{token}}' })
class LoginComponent{
   token: string;
   constructor(params: RouteParams) {
      this.token = params.get('token');
   }
}
1
suvroc

Angular 5+ Update

Die Route.snapshot liefert den Anfangswert des Routenparameters Karte. Sie können direkt auf die Parameter zugreifen, ohne zu abonnieren oder beobachtbare Operatoren hinzufügen. Es ist viel einfacher zu schreiben und zu lesen:

Zitat aus der Angular Docs

Um es für Sie auf den Punkt zu bringen, wie man es mit dem neuen Router macht:

this.router.navigate(['/login'], { queryParams: { token:'1234'} });

Und dann in der Login-Komponente (beachte den neuen .snapshot hinzugefügt):

constructor(private route: ActivatedRoute) {}
ngOnInit() {
    this.sessionId = this.route.snapshot.queryParams['token']

}
0