使用服务不起作用的 2 个组件之间的交互 ​​Angular 6/7

Posted 2023-03-13

【中文标题】使用服务不起作用的 2 个组件之间的交互 ​​Angular 6/7

【英文标题】：Interaction between 2 components angular 6/7 using service not working

【发布时间】：2019-07-14 12:56:44

【问题描述】：

您好，我是 Angular 新手并开始学习。 问：我有 2 个组件，一个是从角材料中选择下拉列表，另一个组件是从角材料中选择表格。所以当我从下拉列表中进行选择时，我想在表格组件中看到该选定值。这是我的代码。不知何故，当我当时进行选择时，服务正在调用该方法并进行侦听，但之后我期望执行另一种方法来订阅以侦听更改。 （抱歉，如果我没有使用正确的术语）

以下是组件的结构。

navbarparent.component.html (These are 2 main components)
<div>
   <app-mr-navbar> <!-- navbar.component.html --> </app-mr-navbar>
   <app-player-overview> <!-- Tablecomponent.html --> </app-player-overview>
</div>

选择组件是组件的子组件。有下拉菜单。

navbar.component.html

<div class="nav-header ">
<mat-grid-list cols="7">
<div>
  <mat-grid-tile>
    <app-eyefilter-navbar> <!--  selectbox.component.html --> </app-eyefilter-navbar>
  </mat-grid-tile>
</div>
</mat-grid-list>
</div>

这是 selectbox.component.html

<div class="eyefilter-dd inline-style eachSelect">
<mat-form-field>
<mat-select (selectionChange)="selectionChange($event.value)" placeholder="EyeFilter" [formControl]="eyefilters" multiple id="eyeFilter">
  <mat-option  *ngFor="let filter of filterList" [value]="filter" class="custom-font-size">filter</mat-option>
</mat-select>
</mat-form-field>
</div>

这是我的常用服务文件。

commonservice.ts

import Injectable from '@angular/core';
import HttpClient from '@angular/common/http';
import  Observable from 'rxjs/index';
import  BehaviorSubject, Subject from 'rxjs/index';


@Injectable()
export class PlayerSkillsService 
 private subject = new Subject<any>();
 onChangeSelect(val: string) 
 this.subject.next(val);
 

 getSelectedDropdown(): Observable<any> 
  return this.subject.asObservable();
 

这是选择框组件 ts 文件。

selectbox.component.ts

import PlayersService from '../../services/playerskills.service';
@Component(
 selector: 'app-eyefilter-navbar',
 templateUrl: './eyefilter.component.html',
 styleUrls: ['eyefilter.component.scss'],
 encapsulation: ViewEncapsulation.None
)


export class EyefilterComponent 
eyefilters = new FormControl();
filterList: string[] = ['Height', 'age', 'Show Power' , 'Finishing', 'Agility'];

constructor(private playerservice: PlayerSkillsService) 
selectionChange(selectedVal): void  // This is executing
this.playerservice.onChangeSelect(selectedVal[0]);

这是表格组件的ts文件。

import Component, OnInit, ViewChild, ViewEncapsulation, Input, OnChanges, SimpleChanges from '@angular/core';
import Subscription from 'rxjs/index';
import PlayerSkillsService from '../../services/playerskills.service';

export class PlayersDataComponent implements OnInit 
  selectedDropdownVal: any;
  subcription: Subscription;
  constructor(private playerservice: PlayerSkillsService) 
   this.subcription = this.playerservice.getSelectedDropdown().subscribe(selectedDropdownVal => this.selectedDropdownVal = selectedDropdownVal);
   // expecting selectedDropdownVal value to be set when you change the selection from selectbox. 
   // THIS IS NOT WORKING.
  
  ngOnInit() 
    this.subcription = this.playerservice.getSelectedDropdown().subscribe(selectedDropdownVal => this.selectedDropdownVal = selectedDropdownVal);
  

我不确定我在这里缺少什么。有人可以帮忙吗？如果需要更多信息，请告诉我。谢谢

【问题讨论】：

在您的表格组件中，将订阅放在 ngOnInit 下，这样可以确保订阅时服务已准备就绪

@Eliseo ：我已经编辑了您建议的内容，但仍然无法正常工作。我的意思是在选择下拉更改值后不会进入表格组件。

伙伴你检查进口了吗？我认为 Subject 应该像这样导入 --> import Subject from 'rxjs/Subject';

【参考方案1】：

您必须在拥有下拉菜单的组件中使用 EventEmitter：https://angular.io/api/core/EventEmitter

然后在另一个组件上你必须捕获 $event。这是一个完整的例子：https://www.infragistics.com/community/blogs/b/infragistics/posts/understanding-output-and-eventemitter-in-angular

【参考方案2】：

感谢@Ionut Tepus。它有助于。我错过了这个单行函数来捕获 playertable 组件中选定的下拉值。

this.data.currentMessage.subscribe(message => 
  this.message = message;
  this.filterBasedonSelection();
  console.log('message', message);
);