Wie werden die Abfrageparameter in Winkel 2 behandelt?

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 

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);

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']

}

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

(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

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

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

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;

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>

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');
   }
}

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']

}