本文實例講述了Angular 2使用路由自定義彈出組件toast操作。分享給大家供大家參考，具體如下：

原理：

使用Angular2的命名路由插座，一個用來顯示app正常的使用，一個用來顯示彈出框，

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

瀏覽器的導(dǎo)航欄中則這樣顯示

http://127.0.0.1:4200/(popup:toast//apps:login)

路由配置

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

toast內(nèi)容

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

ts

在ngOninit函數(shù)中獲取顯示的參數(shù)即可

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

創(chuàng)建用來跳轉(zhuǎn)至popup路由的服務(wù)，例如popup.service

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

使用：

一、在app.module.ts中將服務(wù)導(dǎo)進(jìn)來，注冊

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

二、在使用的test.ts中導(dǎo)入

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

三、在html中定義一個函數(shù)

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

四、調(diào)用

test(){  this.popupSVC.toast({    img: '彈出圖片地址！',    title: '彈出消息內(nèi)容！',    duration: 2000, //toast多久后消失，默認(rèn)為500ms  });}