Как добавить Icon в Angular материал Snackbar в Angular 5

Question

Я новичок в Angular и использую Angular Material Design для пользовательского интерфейса.

В моем приложении есть закусочная.

Теперь я хочу установить значок в снэк-баре, но я попробовал несколько сообщений Stackoverflow, я не могу его установить.

Код:

this.snackBar.open('You are already registered.Please log in.','', { duration: 2000 });

Я хочу установить значок, как на картинке, но у меня есть закусочная без значка. Я не знаю, как добавить это.

Может кто-нибудь помочь мне добавить это.

Answer 1

Открытый метод MatSnackBar позволяет открывать только закусочные с текстом, то есть простые закусочные. Если вы хотите иметь более сложную закусочную - например, с добавленной иконкой - вам нужно будет создать отдельный компонент и открыть этот компонент с помощью метода openFromComponent.

Answer 2

Вот как я это сделал

1. Создать компонент
2. Создать сервис для закусочной
3. добавить компонент в модуль. импортировать его в декларациях и entryComponents
4. Воспользуйтесь услугой

пример

мой-snackbar.component.ts

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

    @Component({
      selector: 'my-snackbar',
      templateUrl: './snackbar.component.html',
      styleUrls: ['./snackbar.component.scss']
    })
    export class MySnackbarComponent implements OnInit {
      constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {
        console.log(data); 
      }

      ngOnInit() {}

      get getIcon() {
        switch (this.data.snackType) {
          case 'Success':
            return 'done';
          case 'Error':
            return 'error';
          case 'Warn':
            return 'warning';
          case 'Info':
            return 'info';
        }
      }
    }

.........

мой-snackbar.component.html

<div fxLayout="row" class="snack-container">
  <div>
    <mat-icon>{{getIcon}}</mat-icon>
  </div>
  <div>
    <span>{{data.message}}</span>
  </div>
</div>

.........

мой-снек-bar.service.ts

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import { MySnackbarComponent } from '../components/snackbar/my-snackbar.component';

@Injectable({
  providedIn: 'root'
})
export class MySnackBarService {
  constructor(private snackBar: MatSnackBar) {}
  public openSnackBar(message: string, action: string, snackType?: snackType) {
    const _snackType: snackType =
      snackType !== undefined ? snackType : 'Success';

    this.snackBar.openFromComponent(SnackbarComponent, {
      duration: 2000,
      horizontalPosition: 'end',
      verticalPosition: 'top',
      data: { message: message, snackType: _snackType }
    });
  }
}

........

app.module.ts

@NgModule({
  declarations: [
    SnackbarComponent
  ],
  imports: [
...
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    SnackbarComponent
  ]
})
export class AppModule {}

.......

other.component.ts

import { Component, OnInit } from '@angular/core';
import { MySnackBarService } from '../../services/my-snack-bar.service';

@Component({
...
})
export class SomeComponent implements OnInit {

  constructor(
    private snack: MySnackService
  ) {}

  ngOnInit() {
  }


  openSnack() {
    this.snack.openSnackBar('Testing snack', '', 'Success');
  }
}

Answer 3

Попробуйте openFromComponent или openFromTemplate методов службы MatSnackBar вместо простого open.