讓頂級導航欄了解組件資料的最“Angular”方式是什么？

我有一個像這樣宣告的頂級導航欄：

<app-loading *ngIf="isLoading"></app-loading>

<div *ngIf="!isLoading">
    <app-navigation></app-navigation>
    <router-outlet></router-outlet>
</div>

在我的應用程式中，我有作業空間的概念，作業空間具有型別名稱string（例如“公司 X”、“公司 Y”）。

app-navigation我在（導航欄）內的頂級導航鏈接是Workspaces, Teams, Activity. 每個專案都將您帶到同名的組件。

單擊Workspaces會加載 Workspaces 組件，該組件會呈現一組作業空間。單擊其中一個作業區項會加載一個子組件，該子組件呈現與作業區相關的資料，包括其名稱，并且用戶可以從那里加載作為該作業區組件的子級的其他組件。我希望能夠在導航欄中顯示當前活動作業區的名稱。

換句話說，我希望導航欄顯示Workspaces在組件層次結構中高于某個級別時呼叫的鏈接，但是如果用戶將組件樹向下導航到作業區，對于層次結構中該作業區下方的所有組件，我想要導航欄顯示當前活動作業區的名稱。這是一個快速的圖表來說明：

實作這一目標的最“角度”的方式是什么？我能想到幾個選擇：

1. 在組件層次結構的每個級別使用事件發射器，并通過樹向上和導航欄發射和捕獲事件。這似乎是一個糟糕的選擇。很多額外的作業，很多不需要耦合的組件之間的耦合。脆弱的組件結構和可能更多的易碎代碼。

2. I could try and create an interface with a field for the active workspace, and make each relevant component implement that interface. Then I might be able to use the ActivatedRoute snapshot to load the current component and access the field - I'm not really sure if this is possible, or if it's what ActivatedRoute is meant for.

3. I could use the router, and listen for changes in the URL - when the URL detects a child e.g. /workspaces/${WorkspaceId}/** I could pull the workspaceId out of the route and make a get request to the API - this would make the service very chatty and seems wasteful as I'm asking for data I already have

4. I have a workspace service that handles API requests, I could update the GET request for a workspace and ensure that whenever I make a GET request I save a copy of the workspace data into the service - and call it something like lastRequestedWorkspace. Then I could inject that service into the nav bar and read the data back out. This seems like the best approach but there would probably be edge cases to handle where I want to load workspace data in a situation where that workspace is not the currently active one (for example rendering a list of workspaces with relationships to the current one). Another potential issue here is deep linking directly to content. If a user were to click through the application, when the workspace is requested, the name would be rendered in the nav bar as expected, but in the case where a user navigates directly to a child, I would have no way of making that connection. I.e. A direct link to /workspaces/${WorkspaceId}/sub-page would load that sub component as expected, but since the parent component was never loaded, the workspace was never set and so I would not be able to show the name. The user would have to navigate back up to the list of workspaces and navigate back down in before it would be loaded. Additionally, the nav bar is the first component that loads due to being a child of app-component and a sibling to the top level router-outlet - meaning that I couldn't even read which component is eventually loaded - the nav bar would be loaded and rendered by that point. How would I get the URL out of the activated route (the nav bar wouldn't have access to the parameter map) or force a re-render of the nav bar onces the sub-component is loaded??

上面是否有一個選項對您來說是最好的？為什么？我在這里錯過了哪些簡單的選項？很想聽聽。

uj5u.com熱心網友回復：

我能想到的兩個選擇。

#1 -你可以將任何你想要的資料傳遞給路由。

{ path: 'static', component: StaticComponent, data :{ id:'1', name:"Angular"}},

因此，如果您的活動組件始終與路線相關，您可以傳遞某種列舉值或其他東西。任何組件都應該能夠訂閱路由資料并對其進行操作。

constructor(private activatedroute:ActivatedRoute) {}

ngOnInit() {
    this.activatedroute.data.subscribe(data => {
        this.product=data;
    })
}

信用：https ://www.tektutorialshub.com/angular/angular-pass-data-to-route/ 。

#2 -您可以將 Angular 服務與 observable 一起使用。這類似于您的第一個選項，但您消除了所需的父/子關系，并且它在技術上使用可觀察物件而不是事件。但是任何組件都可以引發“事件”（修改主題），并且任何其他組件都可以訂閱更改并實時更新。

共享服務.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class SharedService {

  private message = new BehaviorSubject('First Message');
  sharedMessage = this.message.asObservable();

  constructor() { }

  nextMessage(message: string) {
    this.message.next(message)
  }
  
}

父組件.ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from "../shared.service";

@Component({
  selector: 'app-parent',
  template: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.sharedMessage.subscribe(message => this.message = message)
  }

}

兄弟組件.ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from "../shared.service";

@Component({
  selector: 'app-sibling',
  template: './sibling.component.ts',
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.sharedMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.sharedService.nextMessage("Second Message")
  }

}

請注意，它們不必像本示例中的檔案名那樣是父/兄弟。

Credit: https://enlear.academy/sharing-data-between-angular-components-f76fa680bf76

標籤：有角度的

上一篇：在div之后得到不需要的逗號

下一篇：如何從觀察者回傳一個類(httpClient.get)