Question

我如何有2个具有相同功能但可以切换但都在不同组件中的按钮？

这是m_quick_sidebar_toggle的调用方式

import { Directive, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
import { $ } from 'protractor';

   @Directive({
       selector: '[mQuickSidebarOffcanvas]'
      })
   export class QuickSidebarOffcanvasDirective
    implements AfterViewInit, OnDestroy {
       constructor(private el: ElementRef) {}

ngAfterViewInit(): void {
    const offcanvas = new mOffcanvas(this.el.nativeElement, {
        overlay: true,
        baseClass: 'm-quick-sidebar',
        closeBy: 'm_quick_sidebar_close',
        toggleBy: 'm_quick_sidebar_toggle'
    });
}
ngOnDestroy(): void {}

}

Answer 1

您可以使用subject中的BehaviorSubject或rxjs来做到这一点。

想象一下，它包含三个组成部分：接收数据的主要组成部分。发送数据的左侧和右侧。这是结构。

服务：

@Injectable()
export class CommonService{
  private data$ = new Subject<any>();
  public dataEvent = this.data$.asObservable();

  public setData(data){
    this.data$.next(data);
  }
}

左侧组件

export class LeftComponent{
  constructor(
    private service: CommonService
  ) { }

  sendData(){
    this.commonService.setData("my data from left component");
  }
}

左侧组件html

<span (click)="sendData()"> Send data</span>

正确的组成部分

export class RightComponent{
  constructor(
    private service: CommonService
  ) { }

  sendData(){
    this.commonService.setData("my data from right component");
  }
}

正确的组件html

<span (click)="sendData()"> Send data</span>

主要组成部分

export class MainComponent{
  public data= "";
  constructor(
    private service: CommonService
  ) { 
      this.service.dataEvent
      .subscribe(res => {
        this.data = res;
      });
    }
}

正确的组件html

<p>Data sent from components : {{data}}</p>

有效的堆叠闪电战：https://stackblitz.com/edit/angular-vts7zd?file=src%2Fapp%2Ftest.component.ts

Answer 2

方法1

如果您的应用程序很小，则可以通过全局服务中的标志进行管理。

//服务

@Injectable()
export class ToggleService {
    private _toggleFlag: boolean = false;

    public get isVisible(){
        return this._toggleFlag;
    }

    public toggle() {
        this._toggleFlag = !this._toggleFlag;
    }
}

让“ toggleService ”是服务“ ToggleService ”的注入实例名称。

//切换按钮代码

<button (click)="toggleService.toggle()">Toggle</button>

//消息按钮代码

<button *ngIf="toggleService.isVisible">Messages (10)</button>

方法2

如果您的应用程序太大并且有很多类似的依赖项，那么上面的代码会使您的代码混乱。在这种情况下，您可以使用“ ngRX ”状态管理。为此，您可以参考以下链接。

https://angular-2-training-book.rangle.io/handout/state-management/ngrx/

https://blog.nrwl.io/using-ngrx-4-to-manage-state-in-angular-applications-64e7a1f84b7b

Answer 3

创建一个全局服务，这对于所有组件都是通用的。在单击按钮时，请检查全局标志值并在按钮功能之间切换。

someFunction(){
    if(this.global.flag){
        this.global.flag = false;
        console.log('do something')
    }
    else{
        this.global.flag = true;
        console.log('toggle the functionality');
    }

Answer 4

在这两个组件的第一个公共祖先组件中，使用@ViewChild获取对按钮的引用，然后使用rxjs merge do：

...
@ViewChild('firstButton') firstButton : ElementRef;
@ViewChild('secondButton') secondButton : ElementRef;
...
ngAfterViewInit(): void {
    merge(
        fromEvent(firstButton.nativeElement,'click'),
        fromEvent(secondButton.nativeElement,'click')
    ).subscribe( () => toggleFunction() )
}

我假设toggleFunction是祖先组件的一部分，但是即使不是，您也可以执行另一个@ViewChild来获取提供切换功能的组件，然后执行以下操作：

elementThatProvidesToggle.toggle()

使用ViewChild的Angular 6

4 个答案: