Hay dos formas de comunicarse entre componentes no relacionados en angular:

1 - A través de los servicios, debe comprender dónde inyectarlo, en su caso, creo que debería inyectarse en la raíz, así que intente esto con su servicio (siga este tutorial para implementar su servicio, solo agregue mi código en lugar del de ellos)

 @Injectable({ providedIn: 'root', })

2 - A través de una tienda (mucha codificación repetitiva, para usar si tiene estados complejos para mantenerse sincronizado a través de toda la aplicación, por cierto, la tienda es básicamente un servicio)

Si sus componentes no están relacionados, puede crear un servicio compartido entre ellos. Luego, debe usar la inyección de dependencia para comunicarse entre estos componentes. Entonces, hay un excelente tutorial de Angular que describe cómo hacerlo.

El código de servicio se vería así:

 @Injectable() export class FooService { constructor( ) { } private yourData; setData(data){ this.yourData = data; } getData(){ let temp = this.yourData; this.clearData(); return temp; } }

y componente emisor:

 import { Router } from '@angular/router'; import { FooService} from './services/foo.service'; export class SenderComponent implements OnInit { constructor( private fooService: FooService, private router:Router) {} somefunction(data){ this.fooService.setData(data); this.router.navigateByUrl('/reciever');//as per router } }

y suscriptor:

 import { Router } from '@angular/router'; import { TransfereService } from './services/transfer.service'; export class RecieverComponent implements OnInit { data; constructor( private fooService: FooService){ } ngOnInit() { data = this.transfereService.getData(); console.log(`data: `, data) } }

Solución: para pasar los datos de un componente a otro, podemos almacenarlos en un almacenamiento de sesión o en un almacenamiento local y luego acceder a ellos en otros componentes desde ese almacenamiento. Aquí proporcioné un código de muestra usando el almacenamiento local para su referencia.

página de inicio.componente.ts:

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-homepage', templateUrl: './homepage.component.html', styleUrls: ['./homepage.component.css'] }) export class HomepageComponent implements OnInit { constructor() { } myHeight!:number; myWeight!:number; data:string=''; bmi!:number; ngOnInit(): void { } onGenerate( height:string,width:string){ this.myHeight = +height; this.myHeight=Math.pow(this.myHeight/100,2); this.myWeight = +width; this.bmi=this.myWeight/this.myHeight; this.data=localStorage.setItem('bmi',this.bmi); console.log(this.bmi); //this is the calculated value to send } }

resultadocomponente.ts:

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-result', templateUrl: './result.component.html', styleUrls: ['./result.component.css'] }) export class ResultComponent implements OnInit { data:any; constructor() { this.data=localstorage.getItem('bmi')} //Access the bmi using the data variable here ngOnInit(): void { } }