Eine kurze Diskussion über die schönste Art, Parameter zu übergeben und Parameter beim Routing in Angular4.0 zu erhalten

Der folgende Redakteur wird mit Ihnen einen Artikel über die schönste Art, Parameter zu übergeben und Parameter beim Routing in Angular4.0 zu erhalten, teilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und werfen wir einen Blick darauf

Nachdem ich die offizielle Website von ng4 recherchiert hatte, fand ich endlich die Methode, die ich wollte. Das Ergebnis, das ich möchte, besteht darin, zum Senden die Spleißparameter „&“ zu verwenden, was sich am besten zum Lesen eignet.

Ansonsten gibt es viele „/“-Spleiße, die Parameter und Komponentennamen leicht verwechseln können.

Im Allgemeinen liegen unsere Seitensprung-Übertragungsparameter in diesem Format vor:

http://angular.io/api?uid=1&username =moon

Aber in SPA-Einzelseitenanwendungen sind die meisten Ergebnisse wie folgt [Elementary-Videos sind alle oberflächlich wie folgt]

http://angular.io/api/1/moon

Wie erzielst du also die von mir genannten Ergebnisse?

Der Hauptpunkt beginnt.

Springen Sie von der Produktseite zur Produktdetailseite.

Schritt 1: Routing in app-routing.module.ts konfigurieren.

const routes: Routes = [
{
 path: 'product',
 component: ProductComponent,
 },
 {
 path: 'product-detail',
 component: ProductDetailComponent,
 }
];

Schritt 2: Jump in product.ts schreiben und Parameter übergeben.

constructor(
 private router: Router, //这里需要注入Router模块
){}
jumpHandle(){
 //这是在html中绑定的click跳转事件
 this.router.navigate(['product-detail'], {
 queryParams: {
  productId: '1',
  title: 'moon'
 }
 });
}

Schritt 3: Holen Sie sich die übergebenen Parameter „productId“ und „title“

constructor( 
 private activatedRoute: ActivatedRoute, //这里需要注入ActivatedRoute模块 
) { 
 activatedRoute.queryParams.subscribe(queryParams => { 
 let productId = queryParams.productId; 
 let title = queryParams.title; 
 }); 
}

ok, das ist die perfekte Lösung.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der Konfigurationsmethode mit Sass basierend auf dem CSS-Vorladen in Vue

In WeChat implementiert Applet Beispielcode für Fingerzoombilder

Paging basierend auf vue.js

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die schönste Art, Parameter zu übergeben und Parameter beim Routing in Angular4.0 zu erhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!