Передача Mat Autocomplete выбранного значения в дочерний компонент - PullRequest
Новая
       18

Передача Mat Autocomplete выбранного значения в дочерний компонент

0 голосов
/ 10 февраля 2019

После того, как пользователь выберет значение из автозаполнения углового материала, я хочу передать это значение дочернему компоненту.

Я могу получить выбранное значение с помощью параметра optionSelected output eventemitter, доступного в API.Но я не уверен, что лучший или самый простой способ - передать значение дочернему компоненту.

Я почти уверен, что могу использовать службу в качестве посредника, но я подумал, что мог бы объявить свойство Input в дочернем компоненте.

Вот код:

Programs.component.html 

<form>
  <mat-form-field>
    <input type="text" placeholder="ProgramName" aria-label="ProgramName"
      matInput [formControl]="programNamesControl" [matAutocomplete]="auto" size="14" >
      <mat-autocomplete #auto="matAutocomplete" (optionSelected)='getSelectedProgram($event.option.value)' >
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option" width:100px>
          {{option}}
        </mat-option>
      </mat-autocomplete>
  </mat-form-field>
  <app-program-names-detail programNameSelected="programNameSelected" *ngIf="loadProgramDetails"></app-program-names-detail>
</form>

program.component.ts 

import { ProgramService } from './../program.service';
import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-programs',
  templateUrl: './programs.component.html',
  styleUrls: ['./programs.component.css']
})
export class ProgramsComponent implements OnInit {
  programNamesControl = new FormControl();
  programNames: string[] = [];
  filteredOptions: Observable<string[]>;
  programNameSelected: string;
  loadProgramDetails: boolean;

  constructor(private programService: ProgramService) {

  }

  ngOnInit() {
    this.programService.getProgramNames().subscribe(data => {
      this.programNames = data;
    });

    this.filteredOptions = this.programNamesControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  _filter(value: string): string[] {
    console.log('Inside filter..');
    return this.programNames.filter(programName =>
      programName.toLowerCase().includes(value.toLowerCase())
    );
  }

  getSelectedProgram(programNameVal) {
    this.loadProgramDetails = true;
    this.programNameSelected = programNameVal;
    console.log('Program Selected is: ' + this.programNameSelected);
  }
}

program-names-detail.component.ts 

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-program-names-detail',
  templateUrl: './program-names-detail.component.html',
  styleUrls: ['./program-names-detail.component.css']
})
export class ProgramNamesDetailComponent implements OnInit {
  @Input('programNameSelected') programNameSelected: string;

  constructor() { }

  ngOnInit() {
    console.log('program Name Selected: ' + this.programNameSelected);
  }
}

У меня нет 't изменено имя-программы-detail.component.html.

Журнал консоли показывает:

Выбранное имя программы: programNameSelected

...