Question

我有一个名为application的下拉列表和另一个名为Navigation的下拉列表。所有导航项都有一个对应的应用程序ID，可以根据在第一个下拉列表中选择的应用程序进行过滤。

如何将应用程序ID从应用程序下拉列表传递到导航组件？

我尝试使用@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;
            });
    })
}

下拉列表过滤

1 个答案: