Angular 2使用路由自定义弹出组件toast操作示例

<router-outlet name='apps'></router-outlet><router-outlet name='popup'></router-outlet>

const rootRoute: Routes = [{  path: 'lists',  component: Lists,  outlet: 'apps',  children: [ ... ]},{  path: 'toast',  component: Toast,  outlet: 'popup',},...];

<div class="box">  <div class="toast-box">    <p class="toast-title">提示</p>    <div class="toast-content">      <ng-container *ngIf="toastParams.img">        <img src="{{toastParams.img}}" class="toast-content-img">      </ng-container>      <ng-container *ngIf="toastParams.title">        <p class="toast-content-p">{{toastParams.title}}</p>      </ng-container>    </div>  </div></div>

this.toastParams = this.popupSVC.getToastParams();

import { Injectable } from '@angular/core';import { Router } from '@angular/router';@Injectable()export class PopupService {  private toastParams;  private loadingParams;  constructor(    private router: Router  ) { }  toast(_params) {    this.toastParams = _params;    let _duration;    if (_params.duration) {      _duration = _params.duration;    } else {      _duration = 500;    }    const _outlets = { 'popup': 'toast' };    this.router.navigate([{ outlets: _outlets }]);    setTimeout(() => {      const _outlets2 = { 'popup': null };      this.router.navigate([{ outlets: _outlets2 }]);    }, _duration);  }  getToastParams() {    return this.toastParams;  }}

import { PopupService } from './svc/popup.service';@NgModule({  imports: [    ...  ],  declarations: [  ...  ],  providers: [    PopupService,  ...  ],  bootstrap: [AppComponent]})

import { PangooService } from './svc/pangoo.service';constructor(  private popupSVC: PopupService,) { }

<div (click)="test()"></div>

test(){  this.popupSVC.toast({    img: '弹出图片地址！',    title: '弹出消息内容！',    duration: 2000, //toast多久后消失，默认为500ms  });}