Как отобразить полученные входные данные формы для другого компонента в Angular 6?

Question

register.component.html (компонент ввода формы)

<div class="card-content">

    <form #registerForm="ngForm" (ngSubmit)="onSubmit(Name.value, Email.value)">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">account_circle</i>
          <input type="text" name="Name"
          #Name
          ngModel required>
          <label for="Name">Name</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">mail_outline</i>
          <input type="text" name="Email"
          #Email
          ngModel
          required
          [pattern]="emailPattern">
          <label for="Email">Email</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <button class="btn-large btn-submit"
          type="submit"
          [disabled]='!registerForm.valid'>Start</button>
        </div>
      </div>

    </form>

  </div>

register.component.ts .................................................. ......................................

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!!

  }

}

quiz.component.html (здесь я хочу отобразить данные, которые пользователь ввел в компоненте реестра) .................................................. .......

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

Answer 1

Есть много способов сделать это, но я бы посоветовал заглянуть в NgRX Store, если вы хотите более простое решение, то можете воспользоваться услугой:

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

В вашем RegisterComponent событии отправки вы позвоните someService.userSubject.next(this.user);, а в вашем QuizComponent подпишитесь на someService.user$, чтобы получить данные

Answer 2

this.route.navigate(['quiz',{username:username,...}])

и в вашем компоненте теста получите данные

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

не забудьте ввести ActivatedRoute в свой тест

constructor(private route:ActivatedRoute)