Question

这里我有两个组件（分别称为第一个和第二个组件），我想在这两个组件之间共享数据，在第一个组件中，我有userid这个用户ID，我想在第二个组件中获取，所以我尝试使用service来获取，但是在第二个组件userid是undefined（在服务中，我得到userid时请完全参见控制台，但在第二个组件中，userid得到未定义），那么如何在第二个组件中获取userid？

user.service.ts

[^0-9+]+

Match a single character not present in the list below [^0-9+]+

+ Quantifier — Matches between one and unlimited times, as many times as possible, giving back as needed (greedy)
0-9 a single character in the range between 0 (index 48) and 9 (index 57) (case sensitive)
+ matches the character + literally (case sensitive)

first.component.ts

  useridOfuser;

  getUserData(){ 
    console.log(this.userid) // 98
    return this.userid; 
  }

  setUserData(userid){
    console.log(userid);  // 98
    this.useridOfuser= userid;
  }

second.component.ts

  constructor(private userService : UserService,private route : ActivatedRoute) {
     const userid = this.route.snapshot.paramMap.get('userid'); // 98
    this.userService.setUserData(userid);
  }

Answer 1

服务通常是可行的想法。但是，可能是您的第二个组件在调用第一个组件中的this.userService.getUserData();之前先调用this.userService.setUserData(userid);。为此，我建议采用反应模式。反应式编程是angular的核心概念之一。

因此，您的userService应该看起来像这样。

useridOfuser = new BehaviorSubject<number>(null);

  getUserData(): Observable<number> { 
    console.log(this.userid) // 98
    return this.useridOfuser; 
  }

  setUserData(userid:number) {
    console.log(userid);  // 98
    this.useridOfuser.next(userid);
  }

在component2中，您可以订阅userId。 second.component.ts

 constructor(private userService : UserService);
 userid;

 ngOnInit() {
   this.userService.getUserData()
   .subscribe(userId => this.userid = userId); // Will update when it changes
   console.log(this.userid);  // undefined
 }

我希望这对您有所帮助！

Junus

如何在angular的两个组件之间共享数据？

1 个答案: