There are Two ways to communicate between unrelated components in angular:

1 - Through services, you have to understand where to inject it, in your case I think it should be injected in root, so try this with your service ( follow this tutorial to implement your service, just add my code instead of theirs )

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

2 - Through a store ( a lot of boilerplate coding, to use if you have complexe states to keep synchronized through the whole app, by the way the store is basically a service )

If your components are not related then you can create a shared service between them. Then, you need to use dependency injection to communicate between these components. So, there is a great Angular tutorial which describes how to do it.

The service code would look like this:

@Injectable()
export class FooService {

  constructor(  ) { }

  private yourData;

  setData(data){
    this.yourData = data;
  }

  getData(){
    let temp = this.yourData;
    this.clearData();
    return temp;
  }
}

and sender component:

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
 }
}

and subscriber:

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)
    }
}

    

Solution: To pass the data from one component to another we can store it in a session storage or a local storage and then access it in other components from that storage. Here I have provided a sample code using local storage for your reference.

homepage.component.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

    }
    }

resultcomponent.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 {
      }
    
    }