Как передать данные в компонент Angular с помощью компонента диалогового окна Nebular?

Я пытаюсь отправить свои objectData из компонента A в DialogComponent для редактирования информации об объекте.

ComponentA открывает диалоговое окно и передает данные следующим образом:

export class ComponentA implements OnInit {
  constructor(private dialogService: NbDialogService) {}
  openDialog(data) {
    this.dialogService.open(DialogComponent, {
      context: {
        product: data,
      },
    });
  }
}

Nebular DialogComponent выглядит так:

export class DialogComponent implements OnInit {
  product: any; <--- the object that the dialogue will receive
  preSaleItem: any; <-- and turn into it, within the dialogue.

  constructor(
    private ref: NbDialogRef<DialogComponent>,
    private dataService: DataService,
  ) {
  }
  navigateToComponentB() { 
    this.dataService.data = this.preSaleItem;
    this.router.navigate(['/pages/componentB']);
    this.close();
  }

  close() {
    this.ref.close();
  }

в диалоговом окне заполнит preSaleItem новой информацией и песком для компонентаB.

Я пробовал два способа передачи данных, один - сервисом.

 export class DataService {
  data: any;

  constructor() {
    console.log(this.data); <----- the return is undefined
  }

И ничего не возвращается. Я думаю, что диалог компонента Nebular убивает прицел.

Мой ComponentB, который получит данные:

 export class ComponentB implements OnInit {

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.preSaleItem = this.dataService.data;
    console.log(this.preSaleItem); <----- return is the same of the service
  }
 }

Дополнительная информация о проблеме: у меня есть компонент A, который передает продукт в диалоговое окно и создает preSaleItem, о котором я упоминал ранее, и который хорошо работает.

После этого, когда preSaleItem был построен в диалоговом окне, мне нужно отправить его компоненту B. Но как я думал, через сервис не работает. :(

Я попытался не проходить через диалог, используя componentA для обслуживания с наблюдаемой переменной для componentB, и это сработало. Но мне нужны данные, чтобы пройти через диалог.

Какие есть возможные решения?


typescript angular ngx-admin nebular
person Guilherme Buchman    schedule 11.09.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я нашел способ решить свою проблему с помощью углового маршрута. Я поставлю простой код для демонстрации. Использование атрибута состояния.

export class DialogComponent implements OnInit {
  product: any; <--- the object that the dialogue will receive
  preSaleItem: any; <-- and transform, to move to componentB.

  constructor(private ref: NbDialogRef<DialogComponent>) {}

  navigateToOptionals() {
    this.fillPreSaleItem();
    this.router.navigate(['/pages/componentB', {
      state: {
        data: this.preSaleItem
      }
    });
    this.close();
  }

  close() {
    this.ref.close();
  }
}

как это было в моем компонентеB

export class ComponentB implements OnInit {
  item: any;

  constructor() {}

  ngOnInit() {
    this.item = history.state.data;;
    console.log(this.item); <----- return my object that i want :)
  }
 }

Я нашел этот сайт, который мне очень помог! https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255

person Guilherme Buchman    schedule 16.09.2020