在组件之间传递 Angular答案

【问题标题】：Passing Between Components Angular在组件之间传递 Angular
【发布时间】：2021-04-13 18:32:40
【问题描述】：

我目前有 3 个这样堆叠的组件：

<app-header></app-header>
<app-body></app-body>
<app-footer></app-footer>

但是我想切换它，使页脚和正文的位置不同，如下所示：

<app-header></app-header>
<app-footer></app-footer>
<app-body></app-body>

一旦我更改了页脚的位置并且页脚不再从数据服务加载任何内容。 footer.component.ts 内的构造函数：

constructor(private dataService: DataService) {
    //subscribing the the dataService so that we can display its contents
    this.dataService.currentNoms.subscribe(noms => {this.nominations.push(noms);});
  }

body.component.ts 内的构造函数：

  constructor(private http: HttpClient, private dataService: DataService) { 
    //adding the nominations to my dataService to use between components
    this.dataService.addNominations(this.nominations);
  }

data.Service.ts：

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private finalNoms = new BehaviorSubject<any>([]);
  currentNoms = this.finalNoms.asObservable();

  constructor() { 
    this.addNominations(this.nominations);
  }

  addNominations(nom: Object){
    this.finalNoms.next(nom);
  }

}

我尝试交换构造函数的内容，但这似乎没有帮助。有谁知道我做错了什么？ Angular 新手，在此先感谢您！

【问题讨论】：

标签： angular typescript components

【解决方案1】：

按理说你的 BodyComponent 是在你的 Footer 组件之后加载的，所以这行代码在你的 Footer 组件请求数据时还没有执行：

this.dataService.addNominations(this.nominations);

我建议将上述代码行移动到数据服务的构造函数中，这样一旦服务可用，数据就始终可用。

或者，您可以在数据服务中利用 rxjs Subjects 异步设置和检索数据：

// In data.service.ts
nominations = new BehaviorSubject([...]);
nominations$ = this.nominations.asObservable();

addNomination(nom) {
    const noms = this.nominations.value;
    noms.push(nom);
    this.nominations.next(noms);
}

// In body.component.ts
nominations: any[]; // Or the interface/type you're using

constructor(private dataService: DataService) {
    this.dataService.nominations$.subscribe(noms => this.nominations = noms);
}

addNomination(nom: any) {
   this.dataService.addNomination(nom);
}

// In footer.component.ts
nominations: any[];

constructor(private dataService: DataService) {
    this.dataService.nominations$.subscribe(noms => this.nomations = noms);
}

【讨论】：

如果我将该行添加到我的 data.service.ts 中，我将收到一条错误消息，指出“'DataService' 类型上不存在属性 'dataService'。”不完全确定这是正确的想法，因为我们现在在 dataService 中调用 dataService
更多信息，body是允许用户搜索的，当用户在dataService中搜索并添加一个item到list中时，item需要显示在footer中
添加到数据服务时，不需要引用数据服务，只需：this.addNominations(this.nominations);
在上面添加了我的数据服务。我不确定这会奏效，或者我不知道它会如何。
这个想法是将所有的提名逻辑移到服务中，以便主体组件只请求数据并在必要时对其进行操作。为此，您需要将 nomications 移动到数据服务器并提供 getter、setter 和其他修改方法以与数组交互：nomination: any[] = [...]get nominations() { return this.nominations; }set nominations(noms: any[]) { this.nomations = noms; }addNomination(nom: any) { this.nominations.push(nom) }

【解决方案2】：

我认为如果你在 div flex 中封闭你的组件，你可以实现

<div [style]="display:flex;flex-direction: column"
     *ngIf="{order:orderService.currentNoms|async} as order" >
  <app-header [style.order]="order.order?order.order[0]:null"></app-header>
  <app-body [style.order]="order.order?order.order[1]:null"></app-body>
  <app-footer [style.order]="order.order?order.order[2]:null"></app-footer>
</div>

你的 main.cmponent

  constructor(public orderService:OrderService){}

您的服务

export class OrderService {

  private finalNoms = new BehaviorSubject<any>([]);
  currentNoms = this.finalNoms.asObservable();

  setOrder(order:any[])
  {
    this.finalNoms.next(order)
  }

在任何组件中在 ngOnInit

 this.orderService.setOrder([1,3,2]) //change the order

一个fool stackblitz

【讨论】：