Angular 角度组件中查询参数的保留值

我正在处理一个角度应用程序。我有一个组件，比如component1，其中我得到一个值作为查询参数，如下所示：

import { ActivatedRoute, Params, Router } from '@angular/router';

 constructor(private activatedRoute: ActivatedRoute)
ngOnInit() {
  this.activatedRoute.queryParams.subscribe((params: Params) => {
      this.user = params.user;
    });
}

在这个组件中，只有我有一个按钮。当用户单击该按钮时，它被路由到component2。在component2上，我有一个后退按钮，当我单击该按钮时，会再次路由到component1。当我从component2返回component1时，我可以看到这个。用户值设置为undefined。当我从component2返回component1时，是否有任何方法必须保留已经存在的值

我已经尝试了上面提到的所有解决方案，但没有一个对我有效。

---

对于这种情况，我建议使用rxjs这样的库在整个应用程序中共享变量状态：

一步一步地走。。首先创建新服务SharedService包含两个变量： （如果您不了解行为主体和可观察对象，我建议您查看此链接以了解更多有关行为主体和可观察对象的信息）

移动到组件1。首先，我们必须订阅SharedService userObservable变量。并且能够更改服务变量值或移动到组件2：

  import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { Observable } from 'rxjs';
  import { SharedService }   from '../services/shared.service'
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })

  export class Component1 implements OnInit {

  user ; 
 constructor(private sharedSerivce : SharedService,
        private router : Router 
 ) { }

 ngOnInit(): void {
  this.sharedSerivce.user.subscribe(currentUser=>{
  this.user= currentUser ; 
 })
 }

saveUser() {
    this.sharedSerivce.changeUser({name : 'new user '}) ; 
}

goToComponent2(){
  this.router.navigate(['/component2'])
 }
}

component1 html文件如下所示：

<h1>Component 1</h1>
<p>current user name is {{user.name}}</p>

<button (click)="saveUser()">
 change user name to 'new user'
</button>
<br>



<button (click)="goToComponent2()">  
goToComponent2
</button>

组件2的html内容也不会比组件1远

<h1>Component 2</h1>
<p>current user name is {{user.name}}</p>
<button (click)="saveUser()">
change user name to 'default user'
</button>
<br>


<button (click)="goToComponent1()">
Back To Component1
</button> 

组件2
当前用户名为{{user.name}

将用户名更改为“默认用户”


返回组件1

<h1>Component 1</h1>
<p>current user name is {{user.name}}</p>

<button (click)="saveUser()">
 change user name to 'new user'
</button>
<br>



<button (click)="goToComponent2()">  
goToComponent2
</button>

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class Component2 implements OnInit {
  user ; 
  constructor(private sharedSerivce : SharedService,
        private router : Router 
 ) { }

 ngOnInit(): void {

    //each time the component 1 loaded will synchronise the value of its user proprty with the value saved in the serivce
    this.sharedSerivce.user.subscribe(currentUser=>{
      this.user= currentUser ; 
    })
  }

  saveUser() {
    this.sharedSerivce.changeUser({name: 'default user'}) ;
  }

  goToComponent1(){
    this.router.navigate(['/component1'])
  }
}

<h1>Component 2</h1>
<p>current user name is {{user.name}}</p>
<button (click)="saveUser()">
change user name to 'default user'
</button>
<br>


<button (click)="goToComponent1()">
Back To Component1
</button>