在 angular 的不同组件之间实现共享方法的最佳位置是什么？

如何解决在 angular 的不同组件之间实现共享方法的最佳位置是什么？

我正在尝试在我的项目中实现 snackbar 角度材料组件。 https://stackblitz.com/angular/ygomllvemnl?file=src%2Fapp%2Fsnack-bar-component-example.ts

这个元素（组件）被其他 3 个组件使用。因此，我需要在每个组件中实现完全相同的方法“openSnackBar”，这将使我的代码变得冗余。

那么实现共享方法'openSnackBar'、service类、helper类...的最佳位置是什么，然后我可以用一行代码调用它？

解决方法

要实现这一点，您需要创建一个共享服务以在多个组件之间共享。确保在模块的 Providers 数组中添加 ToastService。

@Injectable()
export class ToastService {

  public duration =  3000;
  public horizontalPosition: 'left' | 'start' | 'end' | 'right' | 'center' | undefined = 'left';
  public verticalPosition: 'bottom' | 'top' | undefined = 'bottom';

  constructor(private snackBar: MatSnackBar) { }

  public saveToast(
    message = 'Save Successful.',duration = this.duration,horizontalPosition = this.horizontalPosition,verticalPosition = this.verticalPosition
  ) {
    this.snackBar.openFromComponent(ToastComponent,{
      data: message,duration,horizontalPosition,verticalPosition
    });
  }
}

然后在您的 toast 组件中，您必须添加代码以显示小吃店。确保在你的模块中添加 ToastComponent 声明和 entrycomponents 数组：

import { Component,Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA,MatSnackBar } from '@angular/material';

@Component({
    selector: 'general-toast',template: `
    <div>
        <div>
            <span [innerHTML]="data> </span>
        </div>
        <div>
            <button mat-icon-button (click)="dismissToast()">
                <mat-icon>close</mat-icon>
            </button>
        </div>
    </div>
    `,})

export class ToastComponent {

    constructor(
        @Inject(MAT_SNACK_BAR_DATA) public data: any,public snackBar: MatSnackBar
    ) { }

    public dismissToast(): void {
        this.snackBar.dismiss();
    }

}

你现在已经准备好了。您只需要在构造函数中注入 ToastService 并从您的组件中调用即可。

,

虽然它将在多个组件中使用，但它应该在服务中，以便它可以注入多个组件（仅初始化一次，单例）。