如何在angular material的$mdToast中同时使用自定义主题和模板

在Angular Material的$mdToast中同时使用自定义主题和模板，可以按照以下步骤进行操作：

首先，确保已经安装并引入了Angular Material库和其样式文件。
在Angular组件中，导入MdSnackBar和MdSnackBarConfig类。

import { MdSnackBar, MdSnackBarConfig } from '@angular/material';

在组件的构造函数中注入MdSnackBar。

constructor(private snackBar: MdSnackBar) { }

创建一个自定义的主题配置对象，并设置相关属性。

const toastConfig: MdSnackBarConfig = {
  extraClasses: ['custom-toast'],
  duration: 3000,
  panelClass: 'custom-toast-panel'
};

在上述代码中，extraClasses属性用于添加自定义的CSS类，duration属性设置提示消息显示的时间，panelClass属性用于添加自定义的面板CSS类。

创建一个自定义的模板。

<ng-template #customToast>
  <span class="custom-toast-message">这是一个自定义的提示消息</span>
</ng-template>

在上述代码中，#customToast是模板的引用，custom-toast-message是自定义消息的CSS类。

在需要显示提示消息的地方，调用openFromTemplate方法，并传入自定义的模板和主题配置对象。

this.snackBar.openFromTemplate(this.customToast, toastConfig);

完整的示例代码如下：

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { MdSnackBar, MdSnackBarConfig } from '@angular/material';

@Component({
  selector: 'app-example',
  template: `
    <ng-template #customToast>
      <span class="custom-toast-message">这是一个自定义的提示消息</span>
    </ng-template>
    <button (click)="showToast()">显示提示消息</button>
  `,
  styles: [`
    .custom-toast-message {
      color: #fff;
    }
    .custom-toast-panel {
      background-color: #333;
    }
  `]
})
export class ExampleComponent {
  @ViewChild('customToast') customToast: TemplateRef<any>;

  constructor(private snackBar: MdSnackBar) { }

  showToast() {
    const toastConfig: MdSnackBarConfig = {
      extraClasses: ['custom-toast'],
      duration: 3000,
      panelClass: 'custom-toast-panel'
    };

    this.snackBar.openFromTemplate(this.customToast, toastConfig);
  }
}

在上述示例代码中，点击按钮后将显示一个自定义的提示消息，消息的样式和显示时间可以根据自己的需求进行调整。

注意：在示例代码中，使用了自定义的CSS类来设置消息的样式，你可以根据自己的需求进行修改。