javascript - 如何在路线 angular 8 之间共享数据

Question

这个问题在这里已经有了答案:





Angular Passing Data Between Routes

(3 个回答)


1年前关闭。




我有一个 JSON 数据，它在父组件中被返回。您需要做的就是在父组件上输入数字“12233”或“34567”，您就可以在控制台上看到正在打印的数据。

就像在 child 中一样，我想使用来自父级的数据打印 {{firstName}} 。

有没有办法使用 stackblitz here 中的路由将数据属性传递给子组件

家长:
HTML:

<button class="btn-thumbnail">type the secret number to pass</button>
<!-- "number": 12233
or
"number": 34567 -->

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

}

数据.JSON:

{
    "items": {
        "userdata": [
            {
                "firstName": "john",
                "lastName": "doe",
        "number": 12233
            },
            {
                "firstName": "mary",
                "lastName": "jane",
        "number": 34567
            }
        ]
    }
}

child :
HTML:

<p>
child works! {{firstName}}
</p>

Stackblitz

Answer 1

当然，它就像在你的例子中一样工作。

将值作为 queryParam 发送像这样:

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

这里的工作 StackBlitz .

传递对象

如果要传递对象，最好的方法是将对象保存在服务中，并通过上述方法仅传递唯一标识符。如果您使用状态管理库，您应该在那里保存您的对象而不是服务。

我做了 another StackBlitz用您的示例对此进行说明(我还稍微清理了代码以使其更易于查看)。