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

Question

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

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

那么共享方法'openSnackBar'、服务class、助手class...最好在什么地方实现，然后一行代码就可以调用了？

Answer 1

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

Answer 2

为此，您需要创建一个共享服务以在多个组件之间共享。确保在模块的 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 组件中你必须添加代码来显示 snackbar。确保在您的模块中添加 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 并从您的组件中调用。

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

What is the best place to implement shared method between different components in angular?

angular

typescript

snackbar

angular12

angular-material-11