Как менять отрисовку в основном компоненте из другого?

В Angular, существует несколько способов изменить отрисовку в основном компоненте из другого. Один из таких способов - использовать сервисы и подписаться на их события.

Сначала необходимо создать сервис, который будет содержать данные и методы для изменения отрисовки в основном компоненте. Например, мы создадим сервис с именем "RenderService":

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RenderService {
  private renderSubject = new Subject<boolean>();
  render$ = this.renderSubject.asObservable();

  changeRender(value: boolean) {
    this.renderSubject.next(value);
  }
}

Здесь мы используем класс Subject из библиотеки RxJS для создания наблюдаемого объекта. Метод changeRender() используется для изменения значения отрисовки и отправки этого значения внутри наблюдаемого объекта.

Затем, необходимо внедрить этот сервис в компонент, из которого мы хотим изменить отрисовку основного компонента. Для этого мы добавляем зависимость в конструкторе компонента:

import { Component } from '@angular/core';
import { RenderService } from 'путь_к_сервису';

@Component({
  selector: 'app-another-component',
  template: `
    <button (click)="changeRender()">Изменить отрисовку</button>
  `,
})
export class AnotherComponent {
  constructor(private renderService: RenderService) {}

  changeRender() {
    this.renderService.changeRender(true); // передаем новое значение отрисовки
  }
}

Здесь, при нажатии на кнопку, мы вызываем метод changeRender() сервиса RenderService и передаем новое значение отрисовки в качестве аргумента.

Теперь нам необходимо подписаться на события отрисовки в основном компоненте и выполнить соответствующие действия при изменении значения. Для этого, воспользуемся сервисом RenderService и методом subscribe():

import { Component, OnInit } from '@angular/core';
import { RenderService } from 'путь_к_сервису';

@Component({
  selector: 'app-main-component',
  template: `
    <div *ngIf="render">Отображение в основном компоненте</div>
  `,
})
export class MainComponent implements OnInit {
  render = false;

  constructor(private renderService: RenderService) {}

  ngOnInit() {
    this.renderService.render$.subscribe(value => {
      this.render = value;
    });
  }
}

Здесь мы используем директиву *ngIf в шаблоне компонента MainComponent, чтобы определить, должен ли быть отрисован определенный блок кода в зависимости от значения переменной render. При изменении значения отрисовки, мы подписываемся на события от сервиса RenderService и присваиваем новое значение переменной render.

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