如何使用router.navigate與Angular傳遞和接收數據？

我試圖傳遞和閱讀採用了棱角分明Route.navigate數據，如何使用router.navigate與Angular傳遞和接收數據？

一個組件上我有

this._router.navigate(["dashboard",{ queryParams: { page: 1 }}],

在儀表板組件我有

ngOnInit() { 
    this.sub = this._route 
     .queryParams 
     .subscribe(params => { 
     // Defaults to 0 if no query param provided. 
     let page = +params['page'] || 0; 
     console.log(page); 
     }); 
    }

但這總是返回

我做錯了什麼？

我ng --version是

@angular/cli: 1.0.2 
node: 6.3.1 
os: darwin x64 
@angular/common: 4.1.1 
@angular/compiler: 4.1.1 
@angular/core: 4.1.1 
@angular/forms: 4.1.1 
@angular/http: 4.1.1 
@angular/platform-browser: 4.1.1 
@angular/platform-browser-dynamic: 4.1.1 
@angular/router: 4.1.1 
@angular/cli: 1.0.2 
@angular/compiler-cli: 4.1.1 
IPLCEWKS01167:routeTest iplcewks01167$

來源

2017-05-09 raju

queryParams應該是navigate第二個參數。

替換該行

this._router.navigate(["dashboard",{ queryParams: { page: 1 }}];

到

this._router.navigate(["dashboard"], { queryParams: { page: 1 }});

來源

2017-05-09 03:34:29 Pengyy

我不知道原因，但是這是行不通的。但是，這個工程:: this._router.navigate（[「dashboard」，{page：1}] :: this.sub = this._route.params .subscribe（params => {console.log（params）; 如果沒有提供查詢參數，默認爲0 let page = + params ['page'] || 0; console.log（page）; }）; – raju

@raju是的，它們是兩種不同的方式。使用'queryParams'，它應該被設置爲第二個參數 – Pengyy

@raju和前一個是'params'的語法，第二個是'queryParams'。 – Pengyy

試試這個： -

this.router.navigate(['/dashboard', { queryParams: { page: 1 }} ]);

來源

2017-05-09 06:53:31

試試這個

{ path: 'a4/:message', component: Angular4Component, data:{ ping:'passedvia router'}}

在組件中使用this.message = this.route.snapshot.params['message'];

這是在回購中使用它的文件。

https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/angular4/angular4.component.ts

爲同一工作的例子 - https://rahulrsingh09.github.io/AngularConcepts

來源

2017-05-09 07:04:26

如何使用router.navigate與Angular傳遞和接收數據？

回答

相關問題