如何在Angular 8的路由之间共享数据。

6 浏览
0 Comments

如何在Angular 8的路由之间共享数据。

我有一个JSON数据，在父组件中返回。您只需在父组件中输入数字"12233"或"34567"，然后在控制台上可以看到数据被打印出来。

就像在子组件中，我想使用来自父组件的数据打印{{firstName}}。

有没有办法通过路由将数据属性传递给子组件，就像在这里的stackblitz中那样？

父组件：

HTML:

TS:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import data from '../data.json';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  constructor(private router: Router) {
    document.addEventListener('keypress', this.secretNumber);
  }
  typed = '';
  firstName : any = {};
  secretNumber = event =>  {
    this.typed += String.fromCharCode(event.keyCode);
    let eraseData = [];
    let matchedData = {};
    if (this.typed.length == 5) {
      Object.keys(data).length > 0 &&
      data.items && data.items.userdata.map((item, i) => {
        if(item.number == this.typed) {
          matchedData = item;
          console.log(item);
          this.firstName = item.firstName;
          console.log(this.firstName);
          this.goToChild();
          return matchedData;
        }
        if (item.number != this.typed) {
          eraseData.push(item);
        }
        return eraseData;
      });
      if (Object.keys(matchedData).length == 0 && eraseData.length > 0 && this.typed.length == 5) {
        this.typed = '';
      }
    }
  };
  ngOnDestroy() {
    document.removeEventListener('keypress', this.secretNumber);
  }
  ngOnInit() {
  }
  goToChild() {
    this.router.navigate(['/child'], { skipLocationChange: true });
  }
}

Data.JSON:

{

"items": {

"userdata": [

{

"firstName": "john",

"lastName": "doe",

"number": 12233

},

{

"firstName": "mary",

"lastName": "jane",

"number": 34567

}

]

}

}

子组件：

HTML:

子组件工作了！{{firstName}}

Stackblitz

0

1 答案

0 Comments

在Angular 8中，如何在路由之间共享数据？

问题的原因是在不同的组件之间传递数据。解决方法是使用路由参数来传递数据，或者将数据保存在服务中。

首先，我们可以使用路由参数来传递数据。在上述示例中，可以使用queryParams来发送值，然后在子路由中检索它。具体代码如下：

goToChild(firstName) {
  this.router.navigate(['/child'], { skipLocationChange: true, queryParams: {firstName} });
}
public firstName?: string;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
  this.activatedRoute.queryParamMap.subscribe(paramMap => this.firstName = paramMap.get('firstName'));
}

如果要传递整个JSON数据，可以考虑将数据保存在一个服务中，然后只传递唯一的标识符。如果使用状态管理库，应该将对象保存在该库中，而不是服务中。示例代码如下：

// 保存数据的服务
@Injectable()
export class DataService {
  private data: any;
  setData(data: any) {
    this.data = data;
  }
  getData() {
    return this.data;
  }
}
// 在组件中使用服务
constructor(private dataService: DataService) { }
goToChild(data) {
  this.dataService.setData(data);
  this.router.navigate(['/child']);
}
// 在子组件中获取数据
public data: any;
constructor(private dataService: DataService) { }
ngOnInit() {
  this.data = this.dataService.getData();
}

希望以上解决方法能够帮助你解决在Angular 8中如何在路由之间共享数据的问题。如果还有其他问题，请随时提问。

0