Отправить значения из одного компонента в другой

Question

Я использую angular paginator для материала: https://material.angular.io/components/paginator/examples Paginator запускает событие, и я печатаю размер страницы и индекс страницы. У меня есть этот метод, скажем, в компоненте А.

 paginate($event: PageEvent) {
    concole.log($event.pageIndex);
    console.log($event.pageSize);  
  }

В компоненте B у меня есть две переменные pIndex и pSize.

Я хочу присвоить этим переменным значения, полученные от PageEvent.

Но pageEvent происходит в Компоненте A.

Я попытался добавить источник событий в компоненте A, чтобы испустить размер страницы.

export class ComponentA {

    @Output() pageSizeEmitter = new EventEmitter<number>();

    paginate($event: PageEvent) {
      this.pageSizeEmitter.emit($event.pageSize);
      concole.log($event.pageIndex);
      console.log($event.pageSize);
    }
}

Но затем, в компоненте B, я не знаю, как присвоить его переменной pSize.

export class ComponentB {

    pIndex: number =0; 
    pSize: number =?

}

Буду очень признателен за любое предложение.

Answer 1

Есть несколько способов сделать это. Один из способов (возможно, самый простой на этапе, когда вы работаете со своим кодом - см. Демонстрацию Stackblitz ):

<component-b #compB></component-b>

<component-a (pageSizeEmitter)="compB.pSize = $event"></component-a>

В основном мы используем ссылочные переменные шаблона (compB в приведенный выше код).

Вы можете значительно улучшить этот код, вызвав функцию и передав в качестве аргументов compB и $event и сделав все остальное в коде ts.

И будьте предупреждены что *ngIf на <component-b> разрушит это решение. Итак, на вашем месте я бы использовал больше машинописного кода:

@ViewChild('compB') _compB: ComponentBComponent;

_setPageSize(pageSize: number) {this._compB.pSize = pageSize;}

<component-b #compB></component-b>

<component-a (pageSizeEmitter)="_setPageSize($event)"></component-a>

Но если бы я делал это в рабочем коде, я бы делал это с помощью сервисов, или, что еще лучше , используя полное решение для управления состоянием, например, ngrx.