Angular 2使用路由自定義彈出組件toast操作示例
更新時間：2019年05月10日 09:56:19 作者：zhy前端攻城獅
這篇文章主要介紹了Angular 2使用路由自定義彈出組件toast操作,結(jié)合實例形式分析了Angular2使用路由操作彈出組件toast相關(guān)定義與使用技巧,需要的朋友可以參考下
本文實例講述了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)進來，注冊
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多久后消失，默認為500ms
});
}
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了Angular父子組件通過服務(wù)傳參的示例方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細介紹了Angluar+zorro實現(xiàn)無限級菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Angular頁面?zhèn)鲄⒂卸喾N辦法，根據(jù)不同用例，本文介紹5種最常見的頁面?zhèn)鲄⒌姆绞?。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
Angular動畫實現(xiàn)的2種方式以及添加購物車動畫實例代碼
這篇文章主要給大家介紹了關(guān)于Angular動畫的2種方式以及添加購物車動畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
這篇文章主要給大家介紹了在Angular2下使用pdf插件的方法，使用這個插件是要實現(xiàn)一個pdf顯示的功能，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
基于AngularJS+HTML+Groovy實現(xiàn)登錄功能
AngularJS是一款客戶端MVC的javascript框架，而客戶端MVC代表未來架構(gòu)(為什么要使用MVC+REST+CQRS架構(gòu))，如果你有Struts或SpringMVC等后端MVC框架編程經(jīng)驗，學(xué)習(xí)Angular會很快，基本是按照同一個MVC思路實現(xiàn)的，本文給大家介紹AngularJS+HTML+Groovy實現(xiàn)登錄功能2016-02-02
詳解AngularJS中$http緩存以及處理多個$http請求的方法
$http 是 AngularJS 中的一個核心服務(wù)，用于讀取遠程服務(wù)器的數(shù)據(jù)，通過本文給大家介紹AngularJS中$http緩存以及處理多個$http請求的方法，希望的朋友一起學(xué)習(xí)吧2016-02-02
詳解AngularJS中$filter過濾器使用(自定義過濾器)
這篇文章主要介紹了詳解AngularJS中$filter過濾器使用(自定義過濾器)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
本篇文章主要介紹了Angular4中常用管道，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
AngularJS實現(xiàn)DOM元素的顯示與隱藏功能
這篇文章主要介紹了AngularJS實現(xiàn)DOM元素的顯示與隱藏功能,涉及AngularJS中ng-hide與ng-show兩個屬性的使用,需要的朋友可以參考下2016-11-11