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

2 回答

• 0

  在儿童模板中：

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

  回复于 2024-05-03T16:36:58+08:00
• 0

  Method 1 - Parent-child relationship

  您可以使用 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中测试代码 .

  ---

  Method 2 - Communication between two components with a service

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

  Service ：

  import { Injectable } from "@angular/core"
  
  @Injectable()
  export class VisibilityService {
    hideDiv = false;
  }
  

  Parent component ：

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

  Child1 component ：

  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 component ：

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

  Module ：

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

  回复于 2024-05-03T16:36:58+08:00