Angular 8: отправить событие из одного компонента в родственный компонент

У меня есть компонент боковой панели и компонент страницы.

Компонент боковой панели имеет @ViewChild, который является ngbAccordion из Угловой бустерп. Я хочу вызвать его метод collapseAllиз компонента страницы.

Итак, боковая панель имеет

  @ViewChild('webAccordion', { static: false })
  webAccordion: NgbAccordion;
  @ViewChild('pageAccordion', { static: false })
  pageAccordion: NgbAccordion;


  collapseAllAccordions() {
    this.webAccordion.collapseAll();
    this.pageAccordion.collapseAll();
  }

Когда загружается компонент «страница», я хочу передать событие компоненту «боковой панели», которое запускает мою функцию collapseAllAccordions.

Я знаю, как это сделать с родительскими/дочерними компонентами, и большинство вещей, которые я могу найти в Google, и здесь, на SO, обсуждают родительские/дочерние ситуации. За исключением того, что в моем случае это компоненты брат или сестра. Я не знаю, как обращаться с братьями и сестрами.

Вы можете создать stackblitz или codeandbox, чтобы воспроизвести эту проблему?

— 12.07.2019 17:49

javascript angular angular-components angular-event-emitter

12.07.2019 17:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

3 257

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать промежуточный одноэлементный сервис между этими компонентами и делиться данными/действиями. Например,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SideBarComponent implements OnInit {
  constructor(private service: AppService) { }

  onClick() {
    this.service.collapse();
  }

  ngOnInit(): void { }
}


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss']
})
export class PageComponent implements OnInit {
  constructor(private service: AppService) { 
    // Create a observable object which listens to service and 
    // change the behaviour of current page component and vice versa
  }

  ngOnInit(): void { }
}

Если вам нужна дополнительная помощь, создайте stackblitz или codeandbox, чтобы воспроизвести эту проблему.

12.07.2019 18:12

Ответ принят как подходящий

Вы можете воспользоваться услугой:

Внедрите службу в два родственных компонента.
Добавьте эмиттер или Observable в сервис.
Добавьте в службу функцию, чтобы изменить значение Observable/выдать новое значение, если вы используете эмиттер.
Используйте функцию в компоненте «страница».
Подпишитесь на эмиттер или Observable в компоненте «сайдбар» и активируйте collapseAllAccordions.

Я, скорее всего, воспользуюсь этим musttoknow.com/… Спасибо.

— 12.07.2019 19:13

12.07.2019 18:12