web-dev-qa-db-ja.com

Angular 2のすべてのコンポーネントで使用するサービスでSnackBarを使用する方法

機能しているスナックバーがありますが、それは各コンポーネントにのみあります。サービスに追加したいので、呼び出すだけです。これは私のcomponent.tsのサンプルです

import { MdSnackBar, MdSnackBarRef } from '@angular/material';
...
export class EmployeeListComponent implements OnInit {
  public toastRef: MdSnackBarRef<any>;
  constructor(private _activatedRoute:ActivatedRoute,private router: Router, private http:PMISHttpService, private toast: MdSnackBar) {

  ngOnInit() {
    this.notify('test');
  }
  ...
  notify (text: string) {
    this.toastRef = this.toast.open(text, null);
    setTimeout(() => {
      this.toastRef.dismiss();
    }, 5000);
  }
  ...
}
angularangular-material2snackbar
16
Storm Spirit

SnackBarをアプリ全体で機能させる場合は、それをapp.componentに入れて、サービスと通信する必要があります。

notification.service.ts：

public notification$: Subject<string> = new Subject();

app.component.ts：

constructor(
  private notificationService: NotificationService, private snackBar: MatSnackBar
) {
  this.notificationService.notification$.subscribe(message => {
    this.snackBar.open(message);
  });
}

any.component.ts：

this.notificationService.notification$.next('this is a notification');
17
Ploppy

どこにでもあるようにするには、サービスを作成します。また、期間の設定にはスナックバー設定を使用して、スナックバーを公開する必要があります。

_import {Injectable, NgZone} from '@angular/core';
import {MatSnackBar} from '@angular/material';

@Injectable()
export class CustomSnackbarService {

    constructor(
      public snackBar: MatSnackBar,
      private zone: NgZone
    ) {}

    public open(message, action = 'success', duration = 50000) {
        this.zone.run(() => {
            this.snackBar.open(message, action, { duration });
        });
    }
}
_

また、ngZoneで実行する必要があります： https://github.com/angular/material2/issues/9875

次にコンポーネントで：

customSnackbarService.open('hello')

5
mchl18

簡単にできます。私が私のプロジェクトの1つで使用したサンプルの例を以下に見つけてください、そしてそれは完全にうまくいきます

import { Injectable } from '@angular/core';
import {
  MatSnackBar,
  MatSnackBarConfig,
  MatSnackBarHorizontalPosition,
  MatSnackBarVerticalPosition,
  MatSnackBarRef
} from '@angular/material';

@Injectable()
export class SnackBarService {

  snackBarConfig: MatSnackBarConfig;
  snackBarRef: MatSnackBarRef<any>;
  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
  verticalPosition: MatSnackBarVerticalPosition = 'top';
  snackBarAutoHide = '1500';

  constructor(private snackBar: MatSnackBar) { }

  openSnackBar(message) {
    this.snackBarConfig = new MatSnackBarConfig();
    this.snackBarConfig.horizontalPosition = this.horizontalPosition;
    this.snackBarConfig.verticalPosition = this.verticalPosition;
    this.snackBarConfig.duration = parseInt(this.snackBarAutoHide, 0);
    this.snackBarConfig.panelClass = 'glam-snackbar';
    this.snackBarRef = this.snackBar.open(message, '', this.snackBarConfig);
}

}

これで、コンポーネントまたはこのサービスを使用する場所にこのサービスを挿入し、表示するメッセージでopenSnackBar（）メソッドを呼び出すだけです。

お役に立てれば！！

3
Harmandeep Singh Kalsi

バージョンversionを使用しています "：" 2.0.0-beta.10 "、これは、機能させるために行ったものです

ApModule内

import { NotificationService } from "./notification/notification.service";
import { MdSnackBarModule } from "@angular/material";

@NgModule({
  imports: [
    MdSnackBarModule,
    FormsModule
  ],
  providers: [WebService, NotificationService]

前の投稿で提案されたように通知サービスを作成します

import { Injectable } from "@angular/core";
import {
  MdSnackBar,
  MdSnackBarConfig,
  // MdSnackBarHorizontalPosition,
  // MdSnackBarVerticalPosition,
  MdSnackBarRef
} from "@angular/material";

@Injectable()
export class NotificationService {
  private snackBarConfig: MdSnackBarConfig;
  private snackBarRef: MdSnackBarRef<any>;
    private snackBarAutoHide = "5000"; //milliseconds for notification , 5 secs

  constructor(private sb: MdSnackBar) {}

  openSnackBar(message) {
    this.snackBarConfig = new MdSnackBarConfig();
    //this.snackBarConfig.horizontalPosition = this.horizontalPosition; only in current version Demo uses very old version . need to upgrade later
    //this.snackBarConfig.verticalPosition = this.verticalPosition; only in current version Demo uses very old version . need to upgrade later
    this.snackBarConfig.duration = parseInt(this.snackBarAutoHide, 0);
      this.sb.open(message, "", this.snackBarConfig);
  }
}

以下に示すようにサービスを消費します

   this.notify.openSnackBar(message);
3
Suresh R