本文實(shí)例講述了Angular 2使用路由自定義彈出組件toast操作。分享給大家供大家參考，具體如下：
創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷、企業(yè)網(wǎng)站建設(shè)，友情鏈接，廣告投放平臺(tái)為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。
原理：
使用Angular2的命名路由插座，一個(gè)用來(lái)顯示app正常的使用，一個(gè)用來(lái)顯示彈出框，
瀏覽器的導(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)容
提示
{{toastParams.title}}
ts
在ngOninit函數(shù)中獲取顯示的參數(shù)即可
this.toastParams = this.popupSVC.getToastParams();
創(chuàng)建用來(lái)跳轉(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)來(lái)，注冊(cè)
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中定義一個(gè)函數(shù)
四、調(diào)用
test(){
this.popupSVC.toast({
img: '彈出圖片地址！',
title: '彈出消息內(nèi)容！',
duration: 2000, //toast多久后消失，默認(rèn)為500ms
});
}
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
