如何在组件（Angular）之间共享变量？

Question

I have two components and I am trying to export data (two variables), to the details component from login component. I have routing enabled. I does not seem to work. Where do I bind the variable? I want to show a details component on a new link where I can use these two variables.

login.component.ts

export class LoginComponent implements OnInit {
  imgURL = "link";
  email = "email";
}

details.component.ts

export class DetailsComponent implements OnInit {
  
  @Input() imgURL;
  @Input() email;

}

details.component.html

<app-details [imgURL]="imgURL">
    {{imgURL}}

</app-details>

login.component.html

<div class="container mt-5">
    <h2>Google Login</h2>
    <div class="row mt-5">
      <div class="col-md-4 mt-2 m-auto ">
            <button class="login-Btn" #loginRef>
              Login with Google<img class="social-btn-icon" alt="Login with Google" src="https://hrcdn.net/fcore/assets/google-colored-20b8216731.svg">
            </button>
            <a routerLink="/details" routerLinkActive="active">Details</a>
      </div>   
    </div>
  </div>

Answer 1

One of the ways you can achieve this is to pass imageUrl and email as queryParams with the routerLink that navigates to the details component. You can then subscribe to the ActivatedRoute's queryParams observable on the DetailsComponent to get the variables. On the LoginComponent template have this:

<a [routerLink]="['/details']" [queryParams]="{ email: {{email}}, imgUrl: {{imgUrl}} }" routerLinkActive="active">Details</a>

Then on the DetailsComponent you can have this:

export class DetailsComponent implements OnInit {

  imgUrl: string;
  email: string;

  constructor(
    private route: ActivatedRoute,
  ) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.email = params['email'];
      this.imgUrl = params['imgUrl'];
    });
  }
}