Angular 2使用路由自定義彈出組件toast操作示例
更新時(shí)間：2019年05月10日 09:56:19 作者：zhy前端攻城獅
這篇文章主要介紹了Angular 2使用路由自定義彈出組件toast操作,結(jié)合實(shí)例形式分析了Angular2使用路由操作彈出組件toast相關(guān)定義與使用技巧,需要的朋友可以參考下
本文實(shí)例講述了Angular 2使用路由自定義彈出組件toast操作。分享給大家供大家參考，具體如下：
原理：
使用Angular2的命名路由插座，一個(gè)用來顯示app正常的使用，一個(gè)用來顯示彈出框，
<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)來，注冊(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)文章
AngularJS基礎(chǔ)學(xué)習(xí)筆記之控制器
在AngularJS中，控制器是一個(gè)Javascript函數(shù)（類型/類），用來增強(qiáng)除了根作用域意外的作用域?qū)嵗?。?dāng)你或者AngularJS本身通過<code>scope.$new</code>倆創(chuàng)建一個(gè)新的子作用域?qū)ο髸r(shí)，有一個(gè)選項(xiàng)能讓你將它當(dāng)做參數(shù)傳遞給控制器。2015-05-05
本篇文章主要介紹了Angular中的生命周期鉤子的理解，詳細(xì)的介紹了生命周期鉤子和主要的生命周期鉤子，有興趣的可以了解一下2017-07-07
對(duì)angular 實(shí)時(shí)更新模板視圖的方法$apply詳解
今天小編就為大家分享一篇對(duì)angular 實(shí)時(shí)更新模板視圖的方法$apply詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了詳解Angular如何正確的操作DOM，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
AngularJS API之copy深拷貝詳解及實(shí)例
這篇文章主要介紹了AngularJS API之copy深拷貝詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了詳解Angular6.0使用路由步驟(共7步)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要給大家介紹了Angular.JS通過指令操作DOM的方法，文中給出了詳細(xì)的介紹和示例代碼，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
angular.js指令中transclude選項(xiàng)及ng-transclude指令詳解
這篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude選項(xiàng)的相關(guān)資料，文中介紹的非常詳細(xì)，并給出了完整的示例代碼大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-05-05
本篇文章主要介紹了AngularJS ng-repeat遍歷輸出的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Angular應(yīng)用Bootstrap過程步驟邏輯詳解
這篇文章主要為大家介紹了Angular應(yīng)用Bootstrap過程步驟邏輯詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07