Angular 动态创建多个页面

场景

最近胡思乱想，感觉网站通过路由切来切去不太好，特别是后台管理台，如果通过只打开一个浏览器页签，打开多个页面，这样就不用浏览器路由切来切去，以tab的形式打开多个页面，如果没有关闭，原来页面的数据就一直在，这样就不需要频繁打开页面，减少了服务器压力，二来好查看数据，于是说干就干。

动态加载组件

根据了解，angular可以通过ng-container动态加载不同的组件,其中ngComponentOutlet传入动态加载的组件名称就可以了

  1. <ng-container *ngComponentOutlet="PageComponent"></ng-container>

通过传入一个组件数组，动态添加需要的组件，然后页面遍历该数组

AdminComponent html 这里的tab使用的是 蚂蚁金服开源的ng-zorro-antd

  1.  <nz-tabset [(nzSelectedIndex)]="selectedIndex" nzType="editable-card" [nzHideAdd]="true" (nzClose)="closeTab($event)">
  2.      <nz-tab *ngFor="let tab of tabs; let i = index" [nzClosable]="i > 0" [nzTitle]="tab.name">  
  3.         <ng-container *ngComponentOutlet="tab.pageComponent"></ng-container>
  4.     </nz-tab>
  5. </nz-tabset>

AdminComponent ts 其中我们的其他所有的组件都实现CommonComponent，一边传入的参数管理

  1. import { Component, OnInit } from '@angular/core';
  2. import { AuthService } from '../common-share/api/auth/auth.service';
  3. import { NzModalService } from 'ng-zorro-antd/modal';
  4. import { User } from '../common-share/model/user.model';
  5. import { CommonComponent } from './common/common.component';
  6. import { ComponentListService } from './common/componentlist.service';
  8. @Component({
  9.   selector: 'app-admin',
  10.   templateUrl: './admin.component.html',
  11.   styleUrls: ['./admin.component.less']
  12. })
  13. export class AdminComponent implements OnInit {
  15.   tabs : Array<{page:string,name:string, pageComponent:CommonComponent}> = [];
  16.   //tab现在选择的是第几个
  17.   selectedIndex = 0;
  18.   constructor(private auth: AuthService, 
  19.     private modalService :NzModalService,
  20.     private componentListService:ComponentListService,) {}
  22.   ngOnInit() {
  23.     //加载完先添加一个tab 首页
  24.     this.newTab('adminIndex', '首页');
  25.   }
  26.   //关闭一个tab
  27.   closeTab({ index }: { index: number }): void {
  28.     this.tabs.splice(index, 1);
  29.   }
  30.   /**
  31.    * @param _page 新增tab名称
  32.    * @param _name 
  33.    */
  34.   newTab(_page, _name): void {
  35.     //判断存不存在该tab,存在直接切换过去退出
  36.     let res :boolean = false; 
  37.     let checkIndex = 0; 
  38.     for (let index = 0; index < this.tabs.length; index++) {
  39.       const element = this.tabs[index];
  40.       if(element.page === _page){
  41.         res = true;
  42.         checkIndex = index;
  43.         break;
  44.       }
  45.     }
  46.     if(res){
  47.       this.selectedIndex = checkIndex;
  48.       return;
  49.     }
  50.     //把新加的tab放入tablist中
  51.     this.tabs.push({page:_page, name:_name, pageComponent:null});
  52.     //切换tab到新加的tab
  53.     this.selectedIndex = this.tabs.length;
  54.     //得到数组中tab位置
  55.     const tabsIndex = this.selectedIndex - 1;
  56.     //通过page名称取组件
  57.     const oneTab = this.componentListService.getCommonItem(_page);
  58.     //给组件赋值
  59.     this.tabs[tabsIndex].pageComponent = oneTab.component;
  60.   }
  61. }

CommonComponent

  1. import { Component, OnInit } from '@angular/core';
  2. @Component({
  3.   selector: 'app-common',
  4.   templateUrl: './common.component.html',
  5.   styleUrls: ['./common.component.less']
  6. })
  7. export class CommonComponent  {
  8.   constructor() { }
  9. }

AccessAnalysisComponent 访问分析实现CommonComponent

  1. import { Component, OnInit } from '@angular/core';
  2. import { CommonComponent } from '../common/common.component';
  3. @Component({
  4.   selector: 'app-access-analysis',
  5.   templateUrl: './access-analysis.component.html',
  6.   styleUrls: ['./access-analysis.component.less']
  7. })
  8. export class AccessAnalysisComponent implements CommonComponent {
  9.   constructor() { }
  10.   ngOnInit() {
  11.   }
  12. }

ComponentListService 里面列举了所有可以加载的组件

  1. import { Injectable } from '@angular/core';
  3. import { CommonItem } from './common.item';
  4. import { ListComponent } from '../todolist/list/list.component';
  5. import { UsersComponent } from '../users/users.component';
  6. import { IndexComponent } from '../index/index.component';
  7. import { AccessAnalysisComponent } from '../access-analysis/access-analysis.component';
  8. import { PushAnalysisComponent } from '../push-analysis/push-analysis.component';
  9. import { AddPushMailComponent } from '../push-mail/add-push-mail/add-push-mail.component';
  10. import { PushMailHistoryComponent } from '../push-mail/push-mail-history/push-mail-history.component';
  12. @Injectable()
  13. export class ComponentListService {
  14.   private componentList: Array<{key:string, item:CommonItem}> = [
  15.     {
  16.       key: "adminIndex", item: new CommonItem(IndexComponent, {})
  17.     },{
  18.       key: "accessAnalysis", item : new CommonItem(AccessAnalysisComponent, {})
  19.     },{
  20.       key: "pushAnalysis", item : new CommonItem(PushAnalysisComponent, {})
  21.     },{
  22.       key: "addPushMail", item : new CommonItem(AddPushMailComponent, {})
  23.     },{
  24.       key: "pushMailHistory", item : new CommonItem(PushMailHistoryComponent, {})
  25.     },{
  26.       key: "userList", item : new CommonItem(UsersComponent, {})
  27.     },{
  28.       key: "todoList", item : new CommonItem(ListComponent, {})
  29.     },
  31.   ];
  32.   getComponentList() {
  33.     return this.componentList;
  34.   }
  35.   getCommonItem(_key): CommonItem{
  36.     let res = null;
  37.     this.componentList.forEach(element => {
  38.       if(element.key == _key){
  39.         res = element.item;
  40.       }
  41.     });
  42.     return res;
  43.   }
  44. }

CommonItem 用来定义组件，封装数据，如果需要的话

  1. import { Type } from '@angular/core';
  3. export class CommonItem {
  4.   constructor(public component: Type<any>, public data: any) {}
  5. }

效果图

其中的访问分析和推送分析，原来是选哟通过路由打开不同的页面，现在可以在一个页面，切换tab就可以看不同的数据。同时已经加载的也不会重复加载