Angular 下拉列表筛选

我有一个名为应用程序的下拉列表和另一个名为导航的下拉列表。所有导航项都有相应的应用程序id，可以根据在第一个下拉列表中选择的应用程序进行筛选

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

我尝试使用@Input（'value'）appId:number；在navigation.component.ts中，从应用程序组件获取app.Id，但它不起作用

这是我的密码：

app.component.html

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

<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>

<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>

application.component.html

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

<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>

<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>

{{app.ApplicationName}

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

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

}

从'@angular/core'导入{Component，OnInit，AfterViewInit}；
从“../application.service”导入{ApplicationService}；
从“../iaapplication”导入{iaapplication}；
@组成部分({
选择器：'应用程序'，
templateUrl:“./application.component.html”，
样式URL:['./application.component.css']
})
导出类ApplicationComponent在ViewInit之后实现{
应用程序：阵列；
构造函数（私有应用程序服务：应用程序服务）{}
ngAfterViewInit（）{
这是applicationService
.getApplications（）
.subscribe（数据=>{this.apps=data；}）；
}
}

navigation.component.html

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

<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>

<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>

{{nav.NavName}

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

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

}

从'@angular/core'导入{Component，OnInit，AfterViewInit，Input}；
从“../navigation.service”导入{NavigationService}；
从“../INavigation”导入{INavigation}；
@组成部分({
选择器：“应用程序导航”，
templateUrl:'./navigation.component.html'，
样式URL:['./navigation.component.css']
})
导出类NavigationComponent实现AfterViewInit{
appId=1；
//@输入（'value'）appId:number；
导航：阵列；
构造函数（私有导航服务：导航服务）{}
ngAfterViewInit（）{
这是导航服务
.getNavigations（this.appId）
.subscribe（数据=>{this.navigations=data；}）；
console.log（this.appId）；
}
}

创建一个服务，当数据在

应用程序组件中更改时，您可以使用该服务传递数据。您可以为此使用
主题

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中，插入共享服务并订阅
appIdChanged

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

使用服务共享数据，输入/输出仅在子/父关系中工作。您能举个例子说明我如何做到这一点吗？从navigation.component.html，我想将“nav”传递给显示所选nav项目详细信息的组件。我使用outputEmitter吗？请阅读什么是输入/输出属性。如何以及何时使用它们。在您的情况下，如果您的导航组件和导航详细信息组件没有子-父关系，那么您必须使用服务本身！另外，请给出一个关于应用程序架构的想法，您可能希望将这些组件作为相关组件。