css - 从组件方法中将样式应用于 Angular Toast

Question

我需要将样式应用到将在调用特定函数时使用的 toast。我该怎么做？

toast.service.ts

import { Injectable, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class ToastrService {

    public toasterStatus: BehaviorSubject<Message>;

    constructor() {
        this.toasterStatus = new BehaviorSubject<Message>(null);
    }
    showToaster(type: string, content: string) {
        const toasterObj: Message = { severity: type, detail: content };
        this.toasterStatus.next(toasterObj);
    }
}

export interface Message {
    severity: String;
    detail: String;
}

我的组件.ts

import { ToastrService } from '../../../toast.service';

@Component({
  selector: '...',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit, OnDestroy {
constructor(private logService: LogService,
    private toastrService: ToastrService,){...}

ngOnInit() {

    this.idSubscription$ = this.route.params.subscribe(params => {
      this.id = +params['id'];
    });
    this.logService.debug(this.id);


      // check for error
      if (my.error) {
        this.logService.error('Error retrieving report templates.', reportTemplatesState);
        this.toastrService.showToaster('danger', 'Error retrieving report templates.'); 
  }
}); 

//我需要在组件方法中将下面的样式应用到这个 toastrService 元素

我的.component.css

.toastSticky{ 
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Answer 1

您使用 documentation 执行此操作 :

MatSnackBarConfig
Configuration used when opening a snack-bar.

    panelClass: string | string[]                    Extra CSS classes to be 
                                                     added to the snack bar container.