Javascript 如何在Angular 6中向其他组件显示收到的表单输入数据？

register.component.html（表单输入组件）

quick.component.html（这里我想显示用户在register组件中输入的数据）

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { QuizService } from '../shared/quiz.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

  emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';

  constructor(private route: Router, private quiz: QuizService) { }

  user = {
    username: '',
    email: ''
  };

  ngOnInit() {
  }

  onSubmit(name, email) {
    this.user.username = name;
    this.user.email = email;

    this.route.navigate(['quiz']);
    console.log(this.user.username, this.user.email); // log works!!

  }

}

<div class="row">
  <div class="col s6 offset-s3">
    <h3>Welcome to quiz</h3>

    <b>Your Name is: </b> 
    <br>
    <b>Your Email is: </b>
  </div>
</div>

欢迎参加小测验
你的名字是：


您的电子邮件是：

并在测验组件中接收数据

this.route.params.subscribe(params=>{ console.log(params.username)})

别忘了在你的测验中插入

激活路线

constructor(private route:ActivatedRoute)

并在测验组件中接收数据

this.route.params.subscribe(params=>{ console.log(params.username)})

别忘了在你的测验中插入

激活路线

constructor(private route:ActivatedRoute)

---

有很多方法可以实现这一点，但我建议您看看NgRX商店，如果您想要一个更简单的解决方案，那么您可以使用以下服务：

@Injectable({
  provideIn: ‘root’
})
export class SomeService {
  userSubject = new BehaviorSubject<User>({});
  user$: Observable<User> = this.userSubject;
}

@可注入({
provideIn:'根'
})
导出类服务{
userSubject=newbehaviorsubject（{}）；
user$：Observable=this.userSubject；
}

---

在您的

RegisterComponent

submit事件中，您将调用

someService.userSubject.next（this.user）

并在您的

QuizComponent

中订阅

someService.user$

获取数据有很多方法，但我建议您查看NgRX商店，如果您想要更简单的解决方案，那么您可以使用以下服务：

@Injectable({
  provideIn: ‘root’
})
export class SomeService {
  userSubject = new BehaviorSubject<User>({});
  user$: Observable<User> = this.userSubject;
}

@可注入({
provideIn:'根'
})
导出类服务{
userSubject=newbehaviorsubject（{}）；
user$：Observable=this.userSubject；
}

在您的

RegisterComponent

submit事件中，您将调用

someService.userSubject.next（this.user）

并在您的

QuizComponent

中订阅

someService。用户$

获取数据[