当两个同级组件都使用*ngIf时，它们之间共享数据

// 共享服务
import { Injectable } from '@angular/core';

@Injectable()
export class DataSharingService {
  private sharedData: any;

  getSharedData(): any {
    return this.sharedData;
  }

  setSharedData(data: any): void {
    this.sharedData = data;
  }
}

// 组件A
import { Component } from '@angular/core';
import { DataSharingService } from 'path/to/data-sharing.service';

@Component({
  selector: 'component-a',
  template: `
    <div>
      Component A
      <button (click)="updateData()">Update Data</button>
    </div>
  `,
})
export class ComponentA {
  constructor(private dataSharingService: DataSharingService) {}

  updateData(): void {
    const newData = 'New data from Component A';
    this.dataSharingService.setSharedData(newData);
  }
}

// 组件B
import { Component } from '@angular/core';
import { DataSharingService } from 'path/to/data-sharing.service';

@Component({
  selector: 'component-b',
  template: `
    <div>
      Component B
      <div>{{ sharedData }}</div>
    </div>
  `,
})
export class ComponentB {
  sharedData: any;

  constructor(private dataSharingService: DataSharingService) {}

  ngOnInit(): void {
    this.sharedData = this.dataSharingService.getSharedData();
  }
}