本文实例讲述了Angular 2使用路由自定义弹出组件toast操作。分享给大家供大家参考，具体如下：
原理：
使用Angular2的命名路由插座，一个用来显示app正常的使用，一个用来显示弹出框，
<router name='apps'></router>
<router name='popup'></router>
浏览器的导航栏中则这样显示
http://127.0.0.1:4200/(popup:toast//apps:login)
路由配置
const rootRoute: Routes = [
{
path: 'l
在Angular 2中，自定义弹出组件如`toast`是一种常见的需求，它通常用于向用户展示临时的通知或消息。本实例将详细讲解如何利用Angular 2的路由功能来实现这个功能。
理解基本原理：Angular 2的路由系统支持多个路由插座（`router-outlet`），每个插座可以加载不同的组件。在本例中，我们有两个插座，一个用于常规应用内容（`apps`），另一个用于弹出组件（`popup`）。在HTML模板中，我们可以这样设置：
```html
<router-outlet name='apps'></router-outlet>
<router-outlet name='popup'></router-outlet>
```
当路由导航到特定的`popup`时，`popup`插座会加载对应的组件，而`apps`插座保持当前的主应用视图。
接着，我们配置路由。在`rootRoute`中，我们需要定义两个路径：`lists`作为常规应用内容的路径，`toast`作为弹出组件`Toast`的路径。路由配置如下：
```typescript
const rootRoute: Routes = [
{ path: 'lists', component: Lists, outlet: 'apps', children: [ ... ] },
{ path: 'toast', component: Toast, outlet: 'popup' },
// ...
];
```
`Toast`组件是弹出框的具体实现，其HTML模板可能包含以下结构，用于展示标题、内容以及图片：
```html
<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>
```
在`ngOnInit`中，`Toast`组件通过服务获取显示的参数：
```typescript
this.toastParams = this.popupSVC.getToastParams();
```
为了实现弹出组件的导航，我们需要创建一个`PopupService`，它负责管理`toast`的显示和关闭：
```typescript
@Injectable()
export class PopupService {
private toastParams;
private loadingParams;
constructor(private router: Router) { }
toast(_params) {
this.toastParams = _params;
let _duration = _params.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`中引入并注册它，然后在需要弹出`toast`的组件中注入并调用`toast`方法：
```typescript
// 在app.module.ts中
import { PopupService } from './svc/popup.service';
@NgModule({
imports: [...],
declarations: [...],
providers: [PopupService,...],
bootstrap: [AppComponent]
})
// 在test.ts中
import { PopupService } from './svc/popup.service';
constructor(private popupSVC: PopupService) { }
// 在HTML中触发弹出
<div (click)="test()"></div>
// 在test方法中调用
test() {
this.popupSVC.toast({
img: '弹出图片地址！',
title: '弹出消息内容！',
duration: 2000, // toast多久后消失，默认为500ms
});
}
```
通过这种方式，我们可以在Angular 2应用中灵活地创建和控制自定义的弹出组件，同时保持应用的路由结构清晰。这种方法不仅适用于`toast`组件，还可以扩展到其他类型的弹出组件，如模态框、警告对话框等。在实际项目中，你还可以进一步优化这个服务，添加更多的功能，如动画效果、多种类型的消息支持等。
