Angular 6使用ViewChild

Question

我怎么能有两个功能相同的按钮来切换，但是这两个按钮都在不同的组件中？

​

​

下面是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或rxjs中的BehaviorSubject来完成此操作。

想象一下有三个组件:接收数据的主要组件。发送数据的左侧和右侧。这是结构。

服务：

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