触发不同组件中的相同功能

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

您可以按角度使用services，在该service中编写所需的函数，然后只需在组件中通过该服务的实例即可在整个程序中的任何位置使用它。有关文档，请参见here。

Answer 2

您可以创建一项服务，并使用DRY（请勿重复自己）原则来减少代码逻辑并解决问题。

您可能在应用程序中有多个位置，这些位置需要访问假定为侧栏组件的组件。让我们看看我们如何做到的。

因此，您将创建一个可以切换侧边栏的服务（仅出于生产目的，您可能有更多组件可以在用户创建的情况下进行切换，现在仅假设您只有一个侧边栏组件，而该侧边栏组件将通过两个按钮进行切换。）

现在，您的侧边栏服务将如下所示：

@Injectable()
export class SideBarService {

  isOpen = false;

  @Output() change: EventEmitter<boolean> = new EventEmitter(); //this is a simple event which will return subscriber

  toggle() {
    this.isOpen = !this.isOpen;
    this.change.emit(this.isOpen);
  }

}

app.component.ts：

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {

  constructor(
    private sideBarService: SideBarService
  ) { }

  @HostListener('click')
  click() {
    this.sideBarService.toggle();
  }
}

side-bar-toggle.component.ts：

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent {

  @HostBinding('class.is-open')
  isOpen = false;

  constructor(
    private sideBarService: SideBarService
  ) { }

  ngOnInit() {
    this.sideBarService.change.subscribe(isOpen => {
      this.isOpen = isOpen;
    });
  }
}

app.component.html：

<app-side-bar-toggle></app-side-bar-toggle>
<app-side-bar></app-side-bar>

侧栏服务将具有切换方法和更改事件，因此可以向每个将注入该服务的组件通知面板已打开或可以切换面板。

了解更多：https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb