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;
}

MY-component.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元素

my.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.

在组件方法中将样式应用于角度吐司

1 个答案: