Angular4中两个兄弟组件之间的共享服务

Posted 2023-02-23

【中文标题】Angular4中两个兄弟组件之间的共享服务

【英文标题】：Shared Service between two sibling components in Angular4

【发布时间】：2018-03-10 04:48:53

【问题描述】：

我有两个同级组件，一个 MapComponent 和一个 MenuComponent。每个项目都显示在 GoogleMap（MapComponent）上，当我单击标记时，它会获取该项目的 ID（siteId）。我想要做的是获取该项目 id 并在我的菜单的链接中使用它，这样对于每个项目，它都会与项目 id 建立一个唯一的链接，例如：/project/10001 我有一个共享服务，因为兄弟组件不能直接交换值。我可以将项目 ID 写入共享服务，但我的问题是在我的菜单链接中获取项目 ID。我该怎么做呢？ （我使用的是 Angular4）

地图组件

clickedMarker(siteId: string) 
    this.ss.selectedSite(siteId);
    this.route.navigate(['project', siteId]);
  

菜单组件

selectedSite = this.sharedService.siteId;

<a class="submenu" *ngFor="let submenu of item.submenu, let i = index"
     md-list-item [routerLink]="[submenu.url, selectedSite]">
  <i class="material-icons spacer">submenu.icon</i>
  <div *ngIf="!minimalMenuOpen">submenu.name</div>
</a>

共享服务

@Injectable()
export class SharedService 

  public constructor() 
    console.log('Service is succesfully initialized');
  

  siteId;
  selectedSite(siteId) 
    this.siteId = siteId;
    console.log(siteId);
  

【参考方案1】：

这是我在你的情况下会做的。 Angular 2 send array another page

我推荐服务方法，因为您的大部分组件都为此设置了

activePage: number;

constructor(private path: ActivatedRoute) 

  ngOnInit() 
    this.path.queryParams.subscribe(path => 
      // If there is a value
      this.activePage = +path["id"];
      if (isUndefined(this.activePage)) 
        // What if there is no value
      
    );

不能生成这样的链接吗？

> MenuComponent TS file

selectedSite;
this.sharedService.getSelectedSiteId().subscribe(
  (siteId: any) => 
    this.selectedSite = siteId;
  );

> MenuComponent html file

<!-- This make sure links don't start creating till selectedSite available -->
<ng-container *ngIf="!selectedSite">
  <a class="submenu" *ngFor="let submenu of item.submenu, let i = index" md-list-item [routerLink]="[submenu.url]" [queryParams]="id:'"+ selectedSite + "'">
    <i class="material-icons spacer">submenu.icon</i>
    <div *ngIf="!minimalMenuOpen">submenu.name</div>
  </a>
</ng-container>

您的服务需要对此进行一些调整。

@Injectable()
export class SharedService 

  public constructor() 
    console.log('Service is succesfully initialized');
  

  private siteId: BehaviorSubject<any> = new BehaviorSubject(null);

  selectedSite(siteId) 
    this.siteId.next(siteId);
    console.log(siteId);
  
  
  getSelectedSiteId(): Observable<any> 
    return this.siteId.asObservable();
  

【讨论】：

BehaviorSubject 和 Observable 有什么区别？因为我看到两者都被其他人经常使用。

BehaviourSubject 保持最后一个值，只要组件保持活动状态或其他值发生变化。 Observable 是一种异步方法，用于管理异步数据。如果值在 Observable 所查看的东西（即变量）上发生变化，它会将更改发送到 .subscribe() 方法以使用该数据。这就是为什么Promise 只运行一次，而Observable 可能运行多次。

好的，这个解决方案有效，但是 routerLink 已经实例化，所以我需要更新 routerLink（现在不工作），知道如何解决这个问题吗？

您可以在目标组件的constructor 中使用ActivatedRoute 来过滤URL 上的queryParams。我将在上面添加一个示例 sn-p

您先生，真是个天才！这完全为我解决了！非常感谢您的耐心和时间。