angular 2 переменная возвращает нуль в методе дочернего компонента при вызове из родительского компонента

Question

У меня есть связь с родительским и дочерним компонентами, я хочу запустить метод в дочернем компоненте, который должен открыть модальный и передать данные. Когда я вызываю функцию из родительского объекта с помощью ViewChild, переменная в дочернем методе компонента возвращает ноль, однако должна содержать данные внутри переменной. Когда я запускаю ту же функцию в дочернем компоненте, данные доступны, но это не тот случай, когда вызывается из родительского компонента. Чего не хватает и почему я не вижу данные в дочернем компоненте, при запуске из родительского компонента?

parent. html

    <button (click)="openModal()">New</button>

    <child><child>

parent.ts

    import { FilterComponent } from './../filter/filter.component';

    @ViewChild(FilterComponent) filterComponent: FilterComponent;


    openModal(){
       this.filterComponent.openModal(); // when fired from here, the function in the child component fires, but the variable inside it returns null
    } 

child. html

       <button (click)="openModal()">New</button>
       <modal><modal>

child.ts

     openModal(){
       modalVisible = true;
        console.log(this.filter) returns null; when fired from parent component 
        console.log(this.filter) returns "filter data"; when fired within the component
      }

Answer 1

Из того, что я могу вам сказать, вы в настоящее время выбираете ВСЕ FilterComponents внутри вашего parentComponent. Чтобы использовать this, вам нужно быть более точным c. Вы можете изменить свой ViewChild, чтобы выбрать только один FilterComponent, если это соответствует вашему варианту использования.

Пример:

parent. html

<button (click)="openModal()">New</button>

<!-- notice the #child attribute -->
<child #child><child>

Затем в parent.component.ts

import { FilterComponent } from './../filter/filter.component';

@ViewChild("child") filterComponent: FilterComponent;


openModal(){
   this.filterComponent.openModal(); // now that you're only selecting one element this function call should have access to this values. 
} 

Вы также можете ссылаться на соответствующие стек блиц, который я сделал здесь: https://stackblitz.com/edit/angular-lqmc8x

Удачи!

Answer 2

Я думаю, вы должны переосмыслить свою архитектуру здесь.

Если метод вызывается только из родительского компонента, затем поместить в родительский компонент

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

Answer 3

Я думаю, вам нужен EventEmitter.

parent. html <child (messageEvent)="openModal($event)"></child>

child.ts import { Component, Output, EventEmitter } from @angular/core; export class... @Output() messageEvent = new EventEmitter<string>(); openModal(val) { this.messageEvent.emit(val); }

child. html <button (click)="openModal(val)">Click</button>

или что-то в этом роде.