Angular4 Передача данных от родителя к потомку, испускание не работает

Я пытаюсь передать данные из родительского компонента в дочерний компонент, однако у меня возникла проблема с моей таблицей ng2-smart-table, которая мешает излучению. В моем родительском компоненте я использую ng2-smart-table, который использует userRowSelect (стандартная функция), когда я выбираю строку в таблице, я получаю все данные из этой строки. Данные из этой строки я хочу передать своему дочернему компоненту. Я пробовал использовать общий сервис, ввод и отправку, ни один из них пока не работал. Ниже приведены фрагменты кода двух компонентов. Есть предложения, что делать?

Родительский HTML:

<ng2-smart-table [settings]="settings" [source]="data" (userRowSelect)="onRowSelect($event)"></ng2-smart-table>

Родительский компонент:

@Output() passDataToViewPdf: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
      this.reportService.getReportsTemplates().subscribe(response => this.data = response);
  }

  onRowSelect(event): void {
      this.passDataToViewPdf.next(event);
      this.router.navigate(['/report-view-pdf', localStorage.getItem('siteId')]);
  }

Дочерний компонент:

    @Input() template;

    public handleEvent(event) {
            // get data from passDataToViewPdf emitter
        }
    ngOnInit() { this.template = // get data from handleEvent}

angular input eventemitter emit ng2-smart-table
person viddrawings    schedule 20.11.2017    source источник
comment
Выход используется для отправки от дочернего элемента события, которое может быть получено родительским элементом. Похоже, вы пытаетесь передать событие дочернему элементу от родителя. Это просто не то, как работает angular. Входы используются для передачи данных от родителя к потомку.   -  person JB Nizet    schedule 20.11.2017
comment
@JBNizet, спасибо за разъяснения!   -  person viddrawings    schedule 20.11.2017
comment
stackoverflow.com/questions/35884451/ и stackoverflow.com/questions/31026886/ и stackoverflow.com/questions/41451375/   -  person AJT82    schedule 20.11.2017

Ответы (1)


arrow_upward
2
arrow_downward

Это потому, что Angulars EventEmitter имеет emit метод для выдачи значения. См. документы.

Должен быть

this.passDataToViewPdf.emit(event);

Однако, глядя на ваш код, EventEmitter определяется в родительском компоненте, поэтому ваш родительский компонент передает значение своему родителю, а не дочернему.

Должно получиться вот так.

Дочерний компонент

@Input() template;
@Input() set pdf(newPdf) {
   this._pdf = newPdf;
   this.handleEvent(newPdf);
};
private _pdf;



public handleEvent(event) {
    // process your data
}
ngOnInit() { this.template = // get data from handleEvent}

Родительский шаблон html

<child-component [pdf]="pdfValueInParent"></child-component>

Родительский компонент ts

onRowSelect(event): void {
      this.pdfValueInParent = event;
      this.router.navigate(['/report-view-pdf', localStorage.getItem('siteId')]);
  }
person Patryk Brejdak    schedule 20.11.2017
comment
Я загружаю свой дочерний компонент на другую страницу, я перехожу на эту страницу через функцию onRowSelect в родительском (/ report-view-pdf). Я не включаю селектор дочерних компонентов в сам родительский HTML. Как мне по-прежнему передавать данные своему ребенку, не включая селектор в parent-html? - person viddrawings; 20.11.2017
comment
Что ж, тогда вы можете сделать это несколькими способами, в первую очередь, service, которые будут хранить данные и делиться ими. Если данных мало, вы можете использовать localStorage или попробовать передать их через router. Самым быстрым и безопасным было бы сохранить данные в service, а затем получить их из service внутри child-component. (Под service я имею в виду маленькие angular service или можно сделать singleton) - person Patryk Brejdak; 20.11.2017
comment
У меня уже есть общая служба, маршрутизация или localStorage не подходят, так как мне нужно передать много json-данных. Я могу использовать общую службу для большого количества данных, пока я использовал ее только в своем приложении для передачи только одного значения от компонента к компоненту? - person viddrawings; 20.11.2017
comment
Тогда используйте свой shared service. Это будет лучший вариант. Хранить еще одну переменную не составит труда :) - person Patryk Brejdak; 20.11.2017
comment
Следующая проблема: у меня есть общий сервис, но при подписке на наблюдаемый он всегда возвращает null в моем дочернем компоненте. Вызывает ли проблему маршрутизация? - person viddrawings; 20.11.2017
comment
Пока вы не обновляете страницу, все должно быть в порядке или оставаться на текущем угловом сайте. - person Patryk Brejdak; 20.11.2017
comment
Ах, может быть, после перенаправления на дочерний компонент он просто подписывается и с этого момента ждет изменений. Вы должны инициализировать выборку данных из общей службы. - person Patryk Brejdak; 20.11.2017