问使用服务不工作的两个组件angular 6/7之间的交互

EN

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>

<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.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]);
}
}

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);
  }
}