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

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

用户数据.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);
    }
}

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

用于测试打开user.service.ts

一一尝试两种方法 private myUser = new Subject(); private myUser = new BehaviorSubject(null);

更多详情：DO READ