-1

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

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

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

4

2 回答 2

1

为此，您需要创建一个共享服务以在多个组件之间共享。确保在模块的 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 并从您的组件中调用。

于 2021-07-15T11:12:38.770 回答
0

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

于 2021-07-15T10:54:41.773 回答