Angular 2 - стиль компонента по нажатию кнопки другого компонента

Question

У меня есть кнопка на одном компоненте, который запускает функцию:

<button class="btn-main" (click)="hideElement()"></button>

В другом компоненте, который является всплывающим (и не имеет родительско-дочерних соединений), у меня есть 3 элемента типа div

 <div class="element1"></div>

и я хочу, чтобы он был скрыт (установите класс с видимостью: скрытый), когда я нажимаю на кнопку в родительском. Как я могу скрыть этот div, когда открываю всплывающее окно с этой кнопкой?

Answer 1

Метод 1 - Отношения между родителями и детьми

Вы можете скрыть или показать div в дочернем компоненте с помощью свойства hideDiv и сделать это свойство доступным для привязки данных с помощью декоратора @Input. Свойство может напрямую переключать стиль visibility или применять класс к div:

@Component({
  selector: 'child-component',
  template: `
    <div></div>
    <div [class.hiddenClass]="hideDiv"></div>
    <div [style.visibility]="hideDiv ? 'hidden' : 'visible'"></div>
    <div></div>
  `,
  styles: [`.hiddenClass { visibility: hidden; }`]
})
export class ChildComponent {
  @Input() hideDiv = false;
}

Затем вы измените его с привязкой данных при нажатии кнопки в родительском компоненте:

@Component({
  selector: 'parent-component',
  template: `
    <button (click)="hideChildDiv = !hideChildDiv">Toggle div visibility</button>
    <child-component [hideDiv]="hideChildDiv" ></child-component>
  `
})
export class ParentComponent {
  hideChildDiv = false;
}

Вы можете проверить код в этом стеке .

<Ч />

Метод 2 - Связь между двумя компонентами с услугой

Вы можете использовать службу, чтобы два отдельных компонента могли общаться друг с другом или обмениваться некоторой информацией. Смотрите этот стек для демонстрации.

Услуги

import { Injectable } from "@angular/core"

@Injectable()
export class VisibilityService {
  hideDiv = false;
}

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

@Component({
  selector: 'app-root',
  template: `
    <child1></child1>
    <child2></child2>
  `
})
export class AppComponent {
}

Child1 компонент :

import { VisibilityService } from "./visibility.service";

@Component({
  selector: 'child1',
  template: `
    <button (click)="hideDiv = !hideDiv">Toggle div visibility</button>
  `
})
export class Child1Component {

  public get hideDiv(): boolean {
    return this.visibilityService.hideDiv;
  }

  public set hideDiv(value: boolean) {
    this.visibilityService.hideDiv = value;
  }

  constructor(private visibilityService: VisibilityService) { }
}

Компонент Child2 :

import { VisibilityService } from "./visibility.service";

@Component({
  selector: 'child2',
  template: `
    <div class="div1"></div>
    <div class="div1" [class.hiddenClass]="hideDiv"></div>
    <div class="div1"></div>
    <div class="div1" [style.visibility]="hideDiv ? 'hidden' : 'visible'"></div>
    <div class="div1"></div>
  `
})
export class Child2Component {

  public get hideDiv(): boolean {
    return this.visibilityService.hideDiv;
  }

  constructor(private visibilityService: VisibilityService) { }
}

Модуль

...

import { AppComponent } from './app.component';
import { Child1Component } from './child1.component';
import { Child2Component } from './child2.component';
import { VisibilityService } from "./visibility.service";

@NgModule({
  declarations: [ 
    AppComponent,
    Child1Component,
    Child2Component
  ],
  providers: [
    VisibilityService
  ],
  ...
})
export class AppModule { }

Answer 2

в дочернем шаблоне:

<div class="element1" #element1 ></div>

в дочернем компоненте:

@ViewChild('element1') element1: ElementRef;

в родителе:

@ViewChild(ChildComponent) child: ChildComponent;

constructor(private renderer: Renderer2) {}

hideElement() {
  this.renderer.setStyle(child.element1 , 'visibility' , 'hidden');
}