web-dev-qa-db-ja.com

openFromComponentを使用してスナックバー参照をコンポーネントに注入する方法

最新の 資料ドキュメント は次のように述べています。

OpenFromComponentを介して開かれたカスタムスナックバーをコンポーネント自体から閉じる場合は、MatSnackBarRefを挿入できます。

しかし、方法を示しません。

これらの例では、呼び出しモジュールと同じ.tsファイル内にコンポーネントをネストし、渡さないrefが渡されることを示しています。しかし、より集中的なアプローチを使用したいので、...を使用して新しいモジュールを作成しました。

ng g component components/snackbar

このようにして、必要に応じて異なるhtmlをレンダリングするために@Inputを渡すことができるはずです。これにより、ブランディング、複数のボタン、htmlボタンなどでスナックバーを閉じることができます。参照にアクセスできる場合に限ります。

私の呼び出し.tsには以下があります...

var snackBarRef : any;
snackBarRef = this.snackBar.openFromComponent(SnackbarComponent, {data : snackBarRef});

コンポーネント.tsには次のコンストラクタがあります...

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

私の期待は、コンポーネントに関数を作成し、snackBarRef.dismiss（）に作用できるようにすることです。必要に応じて。しかし、アプリを実行すると、次のエラーが表示されます...

Uncaught (in promise): Error: StaticInjectorError(AppModule)[SnackbarComponent -> InjectionToken MatSnackBarData]: 
  StaticInjectorError(Platform: core)[SnackbarComponent -> InjectionToken MatSnackBarData]

配管が適切であることを確認するために、{data：spamBarRef}を{data：0}に交換しました。そうすることで、エラーが発生せず、データ値0を他のものに使用できますが、もちろん、ローカルで使用するrefのハンドルもありません。

OpenFromComponentのデータセクションを使用する以外に、snackBarRefをコンポーネントに渡す別の方法はありますか？または、代わりに、エラーを発生させずにデータセクションを介して参照を渡す方法はありますか？

referenceangular6snackbar
8
AppDreamer

私は今日同じ問題に行き詰まりましたが、解決策を見つけました：

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

@Component({
  selector: 'my-notification',
  template: `
    <p>{{ data.message }}</p>
    <button mat-raised-button
            color="accent"
            (click)="snackBarRef.dismiss()">{{ data.action }}</button>
  `,
})
export class TestNotificationComponent {
  constructor(
    public snackBarRef: MatSnackBarRef<TestNotificationComponent>,
    @Inject(MAT_SNACK_BAR_DATA) public data: any,
  ) {}
}

AngularはsnackBarRefの注入を処理します。

17
Dario Vogogna

改善 Dario's answer 、呼び出し側コンポーネントでのアクションボタンのクリックをキャプチャしたい場合、（クリック）イベントでsnackBarRef.dismissWithAction()を使用する必要があります。

<button mat-raised-button color="accent" (click)="snackBarRef.dismissWithAction()">{{ data.action }}</button>
1
Sushant Kumar

Angularコンポーネントでのみこれを行いました：

import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-tucamara',
  templateUrl: './tucamara.component.html',
  styleUrls: ['./tucamara.component.scss']
})

export class TucamaraComponent implements OnInit {

snackBarRef: any;

constructor(private _snackBar: MatSnackBar) { }

ngOnInit(){

this.openSnackBar('El correo no existe en la BD por favor registrese.', 'Registrarme');
        this.snackBarRef.afterDismissed().subscribe(() => {
          console.log('::::::::::The snack-bar was dismissed'); // KYBC.Borrar.
          dosomething(); // KYBC.Do something!
        });

}

openSnackBar(mensaje: string, accion: string) {
    this.snackBarRef = this._snackBar.open(mensaje, accion, {
      duration: 5000, // KYBC.Time in milliseconds.
      verticalPosition: 'top', // KYBC.Posible values: 'top' | 'bottom'.
      horizontalPosition: 'center' // KYBC.Posible values: 'start' | 'center' | 'end' | 'left' | 'right'.
    });
  }
0
KYBC Software

ちなみに...それまでの間、私はグローバル変数を作成し（ほとんど行いません）、スナックバーを...

this.globals.snackBarRef = this.snackBar.openFromComponent（SnackbarComponent、{data：0}）;

このように、データセクションを使用して、ポップしたいHTMLセクション番号を渡すことができ、すべてが正常に機能します。しかし、私はまだこれを行うright方法に興味があります。

0
AppDreamer