Фильтрация выпадающего списка

Question

У меня есть раскрывающийся список с названием приложения и другой раскрывающийся список с именем навигация. Все элементы навигации имеют соответствующий идентификатор приложения, который можно отфильтровать на основе приложения, выбранного в первом раскрывающемся списке.

Как передать идентификатор приложения из раскрывающегося списка приложения компоненту навигации?

Я пытался использовать @Input ('value') appId: number; в navigation.component.ts, чтобы получить app.Id из компонента приложения, но это не сработало.

Вот мой код:

app.component.html

<app-application></app-application>
<br/>
<app-navigation></app-navigation>

application.component.html

<mat-form-field>
  <mat-select placeholder="applications">
    <mat-option *ngFor="let app of apps" [value]="app.Id">
      {{app.ApplicationName}}
    </mat-option>
  </mat-select>
</mat-form-field>

application.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ApplicationService } from '../application.service';
import { IApplication } from '../IApplication';

@Component({
  selector: 'app-application',
  templateUrl: './application.component.html',
  styleUrls: ['./application.component.css']
})
export class ApplicationComponent implements AfterViewInit {
  apps: Array<IApplication>;

  constructor(private applicationService: ApplicationService) { }
  ngAfterViewInit() {
    this.applicationService
      .getApplications()
      .subscribe(data => {this.apps = data; } );
  }
}

navigation.component.html

<mat-form-field>
  <mat-select placeholder="navigations">
  <mat-option *ngFor="let nav of navigations" [value]="nav.Id">
    {{nav.NavName}}
  </mat-option>
</mat-select>
</mat-form-field>

navigation.component.ts

import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
import { NavigationService } from '../navigation.service';
import { INavigation } from '../INavigation';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements AfterViewInit {
  appId = 1;
  //@Input('value') appId: number;
  navigations: Array<INavigation>;

  constructor(private navigationService: NavigationService) { }

  ngAfterViewInit() {
    this.navigationService
      .getNavigations(this.appId)
      .subscribe(data => {this.navigations = data; });
      console.log(this.appId);
  }

}

Answer 1

Создайте сервис, который вы можете использовать для передачи данных всякий раз, когда они изменяются в компоненте app-application. Для этого вы можете использовать Subject.

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

@Injectable()
export class ShareAppIdService {

  constructor() { }

  private appId = new Subject();  // private subject

  public changeAppId(value) {   // use this method in the app-application to send the appId to app-navigation
    this.appId.next(value);
  }

  public appIdChanged = this.appId.asObservable();  // subscribe this in app-navigation to get the changed data
}

В компоненте приложения прикрепите прослушиватель щелчка к опциям

<mat-form-field>
   <mat-select placeholder="applications">
      <mat-option (click)="sendChangedId(app.Id)" *ngFor="let app of apps" [value]="app.Id">
        {{app.ApplicationName}}
      </mat-option>
   </mat-select>
</mat-form-field>

В файле ts компонента приложения введите сервис ShareAppIdService и используйте метод, подобный следующему:

sendChangedId(appId) {
    this.sharedAppIdService.changeAppId(appId);
}

В своем приложении навигация, добавьте общий сервис и подпишитесь на appIdChanged.

ngAfterViewInit() {
    this.sharedAppIdService.appIdChanged.subscribe((appId) => {
        this.navigationService
            .getNavigations(appId).subscribe(
                (data) => {
                    this.navigations = data;
            });
    })
}