Angular 2 - 另一个组件按钮上的样式组件单击

Question

我在一个触发功能的组件上有按钮：

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

在另一个弹出的组件中（并且没有父子连接），我有 3 个这样的 div

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

当我单击父级中的按钮时，我希望隐藏一个（设置具有可见性的类：隐藏）。当我使用该按钮打开弹出窗口时如何隐藏该 div？

Answer 1

在子模板中：

<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');
}

Answer 2

方法一——亲子关系

您可以使用hideDiv 属性隐藏或显示子组件中的div，并使用@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;
}

您可以测试this stackblitz中的代码。

---

方法 2 - 使用服务在两个组件之间进行通信

您可以使用服务来允许两个独立的组件相互通信或共享某些信息。有关演示，请参阅 this stackblitz。

服务：

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 { }