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

在我的仪表板组件上

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

但这总是返回0

我做错什么了吗

我的
ng--版本是

@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$

queryParams
应该是
navigate
的第二个参数

更换这条线

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

到

queryParams
应该是
navigate
的第二个参数

更换这条线

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

到

试试这个：-

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

试试这个：-

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

试试这个

{ 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

同样的工作示例-
试试这个

{ 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

相同-
Angular 7.2.0的工作示例引入了在路由组件之间导航时传递数据的新方法，而数据不是查询字符串的一部分

发送数据

export class ComponentA {
    constructor(private router: Router) {}
    goToComponentB(): void {
        this.router.navigate(['routePath'], {state: {data: {...}}});
    }
}

接收数据

export class ComponentA {
    constructor(private router: Router) {}
    goToComponentB(): void {
        this.router.navigate(['routePath'], {state: {data: {...}}});
    }
}

您可以在构造函数中从浏览器的历史对象读取数据：

constructor(){
   Console.log(history.state.data);
}

参考-
Angular 7.2.0引入了在路由组件之间导航时传递数据的新方法，而数据不属于查询字符串的一部分

发送数据

export class ComponentA {
    constructor(private router: Router) {}
    goToComponentB(): void {
        this.router.navigate(['routePath'], {state: {data: {...}}});
    }
}

接收数据

export class ComponentA {
    constructor(private router: Router) {}
    goToComponentB(): void {
        this.router.navigate(['routePath'], {state: {data: {...}}});
    }
}

您可以在构造函数中从浏览器的历史对象读取数据：

constructor(){
   Console.log(history.state.data);
}

参考-
我不知道原因，但这不起作用。但这是有效的：：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是的，它们是两种不同的方式。当使用
queryParams
时，应该将其设置为第二个参数。@raju和前一个参数是
params
的语法，第二个是
queryParams
。我不知道原因，但这不起作用。但它可以工作：：this.\u 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是的，它们是两种不同的方式。使用
queryParams
时，应将其设置为第二个参数。@raju和前一个参数是
params
的语法，第二个参数是
queryParams
。