angular8中如何在不破坏组件数据的情况下添加导航？

Question

我正在设置一个包含三个组件的新应用程序。第一个是表单，提交它我将数据存储在单例服务中，然后导航到第二个组件。单击第二个组件上的按钮，我导航到第三个组件，其中应显示表单中提交的数据。但是这些数据在导航过程中会被破坏，即使我跳过第二个组件也是如此。当两个组件都显示在页面上时，通过字符串插值正常打印数据。我认为该服务是单例且处于 app.component 级别，即使在组件销毁后也应该存储这些数据，但事实并非如此。

所以我的问题是，有没有办法在第一次组件销毁后保存数据？

我将表单组件、服务和输出组件的 .ts 文件附加到中间组件。

Form.component.ts:

import { Component, OnInit, ViewChild, } from '@angular/core';
import { userDataService } from '../shared/user-data.service';
import { NgForm } from '@angular/forms';
import { User } from '../shared/user.model';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home-form',
  templateUrl: './home-form.component.html',
  styleUrls: ['./home-form.component.css']
})

export class HomeFormComponent implements OnInit {


 @ViewChild('myForm', { static: false }) userForm: NgForm;

  constructor(private userData: userDataService,
              private router: Router) {}

  ngOnInit() {
  }

  onSubmit(){
    const newUser = new User(this.userForm.value['name'], this.userForm.value['surname'], this.userForm.value['gender'], this.userForm.value['email']);
    this.userData.addUser(newUser);
    this.userForm.reset();
    this.router.navigate(['/user']);
  }
}

用户-data.service.ts

import { User } from './user.model';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({providedIn: 'root'})

export class userDataService {

    private myUser = new Subject<User>();
    myUserObservable = this.myUser.asObservable(); 

    addUser(user: User){
        this.myUser.next(user);
    }
}

用户-profile.component.ts

import { Component, OnInit } from '@angular/core';
import { userDataService } from '../shared/user-data.service';
import { User } from '../shared/user.model';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css'],
})
export class UserProfileComponent implements OnInit {
  user: User = {
    name: '',
    surname: '',
    gender: '',
    email: ''
  }


  constructor(private userData: userDataService) {}

  ngOnInit() {
    this.userData.myUserObservable.subscribe(
      (user: User) => {
        this.user = user;
      }
    );
  }
}

Answer 1

首先，数据没有被破坏，

这就是 Subject 的工作原理，在您的情况下，您可以使用 BehaviorSubject

所以从 :

private myUser = new Subject();

收件人：

private myUser = new BehaviorSubject(null);

WORKING DEMO

For testing open user.service.ts

Try both method one by one private myUser = new Subject(); private myUser = new BehaviorSubject(null);

For More Detail :

angular8中如何在不破坏组件数据的情况下添加导航？

How to add navigation without destroying component data in angular 8?

forms

service

typescript

angular

angular8