Angular 6 использует передачу переменных между компонентами в одном файле

Question

У меня есть приложение Angular 6, которое использует API для работы.В моем приложении я должен показать некоторые входящие данные в диалоге Angular Material, поэтому диалоговое окно Component находится рядом с основным компонентом, который я использую для отображения данных API.

Вот что мне нужноперенести некоторые из моих данных в компонент Dialog, например:

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

@Component({
  selector: 'app-jours-feries',
  templateUrl: './show-data.component.html',
  styleUrls: ['./show-data.component.scss']
})

    export class ShowDataComponent {
      public data: any;
      // data here will get the incoming data from the API
    }

    @Component({
      selector: 'dialog.component',
      templateUrl: 'dialog.component.html',
      styleUrls: ['./dialog.component.scss']
    }) 

    export class DialogComponent {
      // I want to use data property in this component without duplicating functions and variables
    }

Вот мой оригинальный код:

import { Component, OnInit, Inject } from '@angular/core';
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';
import { ConfigurationService } from 'src/app/services/configuration.service';


export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

@Component({
  selector: 'app-jours-feries',
  templateUrl: './jours-feries.component.html',
  styleUrls: ['./jours-feries.component.scss']
})
export class JoursFeriesComponent implements OnInit {

  public displayedColumns: string[] = ['date', 'reserve', 'description', 'actions'];

  public jourFeriesObjectHolder: any;

  public description: any;

  constructor(
    private dialog: MatDialog,
    private __ConfigurationService: ConfigurationService
  ) {
    this.getJoursFeries();
  }

  /**
   * Getting {{ Congés Annuels }} data from our service
   * 
   */
  public getJoursFeries(){
    this.__ConfigurationService.getJoursFeries().subscribe((data) => {
      this.jourFeriesObjectHolder = data;
    });
  }

  public getJoursFeriesDescription(){
    this.__ConfigurationService.getJoursFeriesDesc().subscribe((data) => {
      // this.jourFeries_IDHolder = data[0]._id;
      // this.descExplicatifJourFer = data[0].description;
      this.description = data[0].description;
    });
  }

  openDialog() {

    const dialogRef = this.dialog.open(AddUpdateJourFerieComponent, { data: this.description });

    dialogRef.afterClosed().subscribe(confirm => {
      if(confirm){
        // do something
      }
    });
  }

  ngOnInit() {
  }

}


@Component({
  selector: 'add-update.component',
  templateUrl: 'add-update.component.html',
  styleUrls: ['./add-update.component.scss']
})

export class AddUpdateJourFerieComponent {

  // Validate Jours Fériés
  requiredDescriptionJoursFeries = new FormControl('', [
    Validators.required
  ]);
  requiredNameJoursFeries = new FormControl('', [
    Validators.required
  ]);
  requiredDateJoursFeries = new FormControl('', [
    Validators.required
  ]);
  requiredTextJoursFeries = new FormControl('', [
    Validators.required
  ]);

  matcher = new MyErrorStateMatcher();

  /* Jour ferié */
  public jourFerDate: string;
  public isReservedHoliday: number = 0;

  public descJourFer: string;

  public descExplicatifJourFer: string;

  public jourFeries_IDHolder: string;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {

    console.log(data);

  }


}

Есть идеи?

Answer 1

Ваш код

constructor(
    private dialog: MatDialog,
    private __ConfigurationService: ConfigurationService
  ) {
    this.getJoursFeries();
    this.getJoursFeriesDescription(); // this one
  }

openDialog() {

        const dialogRef = this.dialog.open(AddUpdateJourFerieComponent, {
          data: {
            description: this.description
          }
        });

        dialogRef.afterClosed().subscribe(confirm => {
          //console.log(`Dialog result: ${confirm}`);
          if(confirm){

          }
        });
      }

Действия по получению ваших данных на AddUpdateJourFerieComponent

import { Inject  } from '@angular/core';
import {  MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material'

constructor(@Inject(MAT_DIALOG_DATA) public data: any){}


  ngOnInit() {
      console.log(this.data, 'here is your data');

    }

Answer 2

я думаю, вам нужно использовать EventEmitter для этого, вот ссылка на документ

Answer 3

Я нашел проблему, ребята, я забыл выполнить функцию извлечения в конструкторе основного компонента, а затем создать объект для его передачи.

 constructor(
    private dialog: MatDialog,
    private __ConfigurationService: ConfigurationService
  ) {
    this.getJoursFeries();
    this.getJoursFeriesDescription(); // this one
  }

openDialog() {

        const dialogRef = this.dialog.open(AddUpdateJourFerieComponent, {
          data: {
            description: this.description
          }
        });

        dialogRef.afterClosed().subscribe(confirm => {
          //console.log(`Dialog result: ${confirm}`);
          if(confirm){

          }
        });
      }

Answer 4

let dialogRef = dialog.open(DialogComponent, {Data: {  }})

Ссылочная ссылка для углового диалога материалов