时间戳

首页 > 解决方案 > Angular 6 在同一文件中的组件之间使用传递变量

node.js - Angular 6 在同一文件中的组件之间使用传递变量

问题描述

我有一个使用 API 工作的 Angular 6 应用程序。在我的应用程序中，我必须在 Angular Material 对话框中显示一些传入数据，因此对话框组件与我用来显示 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);

  }


}

任何想法 ？

标签： node.jsangularmongoosedata-binding

解决方案

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

角度材料对话框的参考链接

推荐阅读