Angular 2使用路由自定義彈出組件toast操作示例
本文實(shí)例講述了Angular 2使用路由自定義彈出組件toast操作。分享給大家供大家參考，具體如下：
原理：
使用Angular2的命名路由插座，一個(gè)用來(lái)顯示app正常的使用，一個(gè)用來(lái)顯示彈出框，
<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)建用來(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ù)
<div (click)="test()"></div>
四、調(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ì)有所幫助。
相關(guān)文章
Angular父子組件通過(guò)服務(wù)傳參的示例方法
這篇文章主要介紹了Angular父子組件通過(guò)服務(wù)傳參的示例方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Angluar+zorro實(shí)現(xiàn)無(wú)限級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了Angluar+zorro實(shí)現(xiàn)無(wú)限級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Angular頁(yè)面?zhèn)鲄⒂卸喾N辦法，根據(jù)不同用例，本文介紹5種最常見(jiàn)的頁(yè)面?zhèn)鲄⒌姆绞健＞哂泻芎玫膮⒖純r(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
Angular動(dòng)畫實(shí)現(xiàn)的2種方式以及添加購(gòu)物車動(dòng)畫實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Angular動(dòng)畫的2種方式以及添加購(gòu)物車動(dòng)畫的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
這篇文章主要給大家介紹了在Angular2下使用pdf插件的方法，使用這個(gè)插件是要實(shí)現(xiàn)一個(gè)pdf顯示的功能，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
基于AngularJS+HTML+Groovy實(shí)現(xiàn)登錄功能
AngularJS是一款客戶端MVC的javascript框架，而客戶端MVC代表未來(lái)架構(gòu)(為什么要使用MVC+REST+CQRS架構(gòu))，如果你有Struts或SpringMVC等后端MVC框架編程經(jīng)驗(yàn)，學(xué)習(xí)Angular會(huì)很快，基本是按照同一個(gè)MVC思路實(shí)現(xiàn)的，本文給大家介紹AngularJS+HTML+Groovy實(shí)現(xiàn)登錄功能2016-02-02
詳解AngularJS中$http緩存以及處理多個(gè)$http請(qǐng)求的方法
$http 是 AngularJS 中的一個(gè)核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)，通過(guò)本文給大家介紹AngularJS中$http緩存以及處理多個(gè)$http請(qǐng)求的方法，希望的朋友一起學(xué)習(xí)吧2016-02-02
詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
這篇文章主要介紹了詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
本篇文章主要介紹了Angular4中常用管道，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
AngularJS實(shí)現(xiàn)DOM元素的顯示與隱藏功能
這篇文章主要介紹了AngularJS實(shí)現(xiàn)DOM元素的顯示與隱藏功能,涉及AngularJS中ng-hide與ng-show兩個(gè)屬性的使用,需要的朋友可以參考下2016-11-11