Der beste Weg, Parameter durch Routing in Angular4.0 zu erhalten

Dieses Mal zeige ich Ihnen den besten Weg, Parameter im Angular4.0-Routing zu übergeben und zu erhalten. Im Folgenden werfen wir einen Blick auf praktische Fälle. Nachdem ich die offizielle Website von ng4 studiert 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

Bei einseitigen SPA-Anwendungen sind die meisten Ergebnisse jedoch wie folgt [Elementare

-Videos

sind alle oberflächlich wie folgt]

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

Wie erzielen Sie also die von mir genannten Ergebnisse?

Der Fokus 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,
 }
];

Schritt2: 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“ in „product-detail.ts“

ok, das ist die perfekte Lösung.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie das On-Change-Attribut in IView

So verwenden Sie die Sass-Konfiguration in Vue Projekt

Das obige ist der detaillierte Inhalt vonDer beste Weg, Parameter durch Routing in Angular4.0 zu erhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!