Question

嗨，我是新手，并开始学习。问：我有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();
 }
}

这是selectbox组件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);
  }
}

我不确定这里缺少什么。有人可以帮忙吗？让我知道是否需要更多信息。谢谢

Answer 1

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

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

Answer 2

感谢@Ionut Tepus。它有助于。我缺少此单行功能来捕获可播放器组件中的选定下拉值。

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

使用服务无法正常工作的2个组件角度为6/7的交互

2 个答案: