Angular动态组件加载

// dashboard.component.ts - 动态仪表板
import {
  Component,
  ViewContainerRef,
  ViewChild,
  AfterViewInit,
  ComponentRef
} from '@angular/core';
import { WidgetService, WidgetConfig } from './widget.service';

interface DashboardWidget {
  id: string;
  title: string;
  component: any;
  config: any;
  ref?: ComponentRef;
  position: { x: number, y: number };
  size: { width: number, height: number };
}

@Component({
  selector: 'app-dynamic-dashboard',
  template: `
    <div class="dashboard">
      <div class="dashboard-header">
        <h2>动态仪表板</h2>
        <div class="widget-controls">
          <select [(ngModel)]="selectedWidget">
            <option value="">选择小部件</option>
            <option *ngFor="let widget of availableWidgets" [value]="widget.id">
              {{widget.name}}
            </option>
          </select>
          <button (click)="addWidget()">添加小部件</button>
          <button (click)="saveLayout()">保存布局</button>
          <button (click)="resetLayout()">重置</button>
        </div>
      </div>

      <div class="dashboard-body" #dashboardBody>
        <div class="widget-grid">
          <div *ngFor="let widget of widgets"
               class="widget-container"
               [style.gridColumn]="widget.position.x"
               [style.gridRow]="widget.position.y"
               [style.width]="widget.size.width + 'px'"
               [style.height]="widget.size.height + 'px'">

            <div class="widget-header">
              <span>{{widget.title}}</span>
              <div class="widget-actions">
                <button (click)="refreshWidget(widget.id)">↻</button>
                <button (click)="removeWidget(widget.id)">×</button>
              </div>
            </div>

            <div class="widget-content" #widgetContainer></div>
          </div>
        </div>
      </div>

      <div class="dashboard-footer">
        <span>已加载 {{widgets.length}} 个小部件</span>
      </div>
    </div>
  `,
  styles: [`
    .dashboard {
      display: flex;
      flex-direction: column;
      height: 600px;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      overflow: hidden;
    }

    .dashboard-header {
      background: #2c3e50;
      color: white;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .widget-controls {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .dashboard-body {
      flex: 1;
      padding: 20px;
      overflow: auto;
    }

    .widget-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }

    .widget-container {
      border: 1px solid #dee2e6;
      border-radius: 6px;
      overflow: hidden;
      background: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .widget-header {
      background: #f8f9fa;
      padding: 10px 15px;
      border-bottom: 1px solid #dee2e6;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .widget-actions {
      display: flex;
      gap: 5px;
    }

    .widget-content {
      padding: 15px;
      height: calc(100% - 45px);
    }
  `]
})
export class DynamicDashboardComponent implements AfterViewInit {
  @ViewChild('dashboardBody', { read: ViewContainerRef }) dashboardBody!: ViewContainerRef;

  widgets: DashboardWidget[] = [];
  availableWidgets: WidgetConfig[] = [];
  selectedWidget = '';

  constructor(private widgetService: WidgetService) {}

  ngAfterViewInit(): void {
    this.loadAvailableWidgets();
    this.loadSavedLayout();
  }

  private loadAvailableWidgets(): void {
    this.availableWidgets = this.widgetService.getAvailableWidgets();
  }

  private loadSavedLayout(): void {
    const savedLayout = localStorage.getItem('dashboard-layout');
    if (savedLayout) {
      this.widgets = JSON.parse(savedLayout);
      this.loadWidgets();
    }
  }

  async addWidget(): Promise<void> {
    if (!this.selectedWidget) return;

    const widgetConfig = this.availableWidgets
      .find(w => w.id === this.selectedWidget);

    if (!widgetConfig) return;

    const widget: DashboardWidget = {
      id: `${widgetConfig.id}-${Date.now()}`,
      title: widgetConfig.name,
      component: widgetConfig.component,
      config: widgetConfig.defaultConfig || {},
      position: { x: 1, y: 1 },
      size: { width: 300, height: 200 }
    };

    this.widgets.push(widget);
    await this.loadWidget(widget);
  }

  private async loadWidgets(): Promise<void> {
    for (const widget of this.widgets) {
      await this.loadWidget(widget);
    }
  }

  private async loadWidget(widget: DashboardWidget): Promise<void> {
    try {
      // 动态加载组件
      const componentRef = this.dashboardBody.createComponent(widget.component);

      // 设置配置
      Object.assign(componentRef.instance, widget.config);

      // 监听组件事件
      if (componentRef.instance.dataUpdate) {
        componentRef.instance.dataUpdate.subscribe((data: any) => {
          this.handleWidgetDataUpdate(widget.id, data);
        });
      }

      // 存储引用
      widget.ref = componentRef;

      // 触发变更检测
      componentRef.changeDetectorRef.detectChanges();

    } catch (error) {
      console.error(`加载小部件失败 ${widget.id}:`, error);
    }
  }

  refreshWidget(widgetId: string): void {
    const widget = this.widgets.find(w => w.id === widgetId);
    if (widget?.ref?.instance?.refresh) {
      widget.ref.instance.refresh();
    }
  }

  removeWidget(widgetId: string): void {
    const index = this.widgets.findIndex(w => w.id === widgetId);
    if (index > -1) {
      const widget = this.widgets[index];

      // 销毁组件
      if (widget.ref) {
        widget.ref.destroy();
      }

      // 从数组中移除
      this.widgets.splice(index, 1);
    }
  }

  saveLayout(): void {
    // 移除组件引用（不能序列化）
    const layoutToSave = this.widgets.map(w => ({
      ...w,
      ref: undefined
    }));

    localStorage.setItem('dashboard-layout', JSON.stringify(layoutToSave));
    alert('布局已保存');
  }

  resetLayout(): void {
    if (confirm('确定要重置仪表板吗？')) {
      // 销毁所有组件
      this.widgets.forEach(widget => {
        if (widget.ref) {
          widget.ref.destroy();
        }
      });

      // 清空数组
      this.widgets = [];
      localStorage.removeItem('dashboard-layout');
    }
  }

  private handleWidgetDataUpdate(widgetId: string, data: any): void {
    console.log(`小部件 ${widgetId} 数据更新:`, data);
    // 处理数据更新逻辑
  }
}

// component-cache.service.ts - 组件缓存服务
import { Injectable, ComponentFactoryResolver, ComponentRef, Type } from '@angular/core';

interface CacheEntry {
  componentRef: ComponentRef;
  lastUsed: number;
  useCount: number;
}

@Injectable({
  providedIn: 'root'
})
export class ComponentCacheService {
  private cache = new Map<string, CacheEntry>();
  private maxCacheSize = 10;
  private cacheExpiry = 5 * 60 * 1000; // 5分钟

  constructor(private resolver: ComponentFactoryResolver) {}

  // 从缓存获取或创建组件
  getOrCreate(
    componentType: Type,
    container: any,
    cacheKey?: string
  ): ComponentRef<any> {
    const key = cacheKey || componentType.name;

    // 尝试从缓存获取
    const cached = this.cache.get(key);
    if (cached && this.isValidCacheEntry(cached)) {
      cached.lastUsed = Date.now();
      cached.useCount++;

      // 重新附加到容器
      container.insert(cached.componentRef.hostView);

      console.log(`从缓存获取组件: ${key}`);
      return cached.componentRef;
    }

    // 创建新组件
    const factory = this.resolver.resolveComponentFactory(componentType);
    const componentRef = container.createComponent(factory);

    // 添加到缓存
    this.cache.set(key, {
      componentRef,
      lastUsed: Date.now(),
      useCount: 1
    });

    // 清理过期缓存
    this.cleanupCache();

    console.log(`创建新组件并缓存: ${key}`);
    return componentRef;
  }

  // 检查缓存是否有效
  private isValidCacheEntry(entry: CacheEntry): boolean {
    const age = Date.now() - entry.lastUsed;
    return age < this.cacheExpiry;
  }

  // 清理缓存
  private cleanupCache(): void {
    if (this.cache.size <= this.maxCacheSize) return;

    // 按最后使用时间排序
    const entries = Array.from(this.cache.entries())
      .sort((a, b) => a[1].lastUsed - b[1].lastUsed);

    // 移除最旧的条目
    const toRemove = entries.slice(0, entries.length - this.maxCacheSize);
    toRemove.forEach(([key]) => {
      this.cache.get(key)?.componentRef.destroy();
      this.cache.delete(key);
      console.log(`清理缓存组件: ${key}`);
    });
  }

  // 手动清理组件
  destroyComponent(key: string): void {
    const entry = this.cache.get(key);
    if (entry) {
      entry.componentRef.destroy();
      this.cache.delete(key);
    }
  }

  // 清空所有缓存
  clearCache(): void {
    this.cache.forEach(entry => entry.componentRef.destroy());
    this.cache.clear();
    console.log('组件缓存已清空');
  }

  // 获取缓存统计
  getCacheStats(): { size: number, entries: any[] } {
    const entries = Array.from(this.cache.entries()).map(([key, entry]) => ({
      key,
      age: Date.now() - entry.lastUsed,
      useCount: entry.useCount
    }));

    return {
      size: this.cache.size,
      entries
    };
  }
}

// secure-component-loader.service.ts - 安全组件加载器
import { Injectable, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Injectable({
  providedIn: 'root'
})
export class SecureComponentLoaderService {
  private trustedSources = new Set<string>([
    'https://trusted-cdn.com',
    'https://internal-server.com'
  ]);

  constructor(private sanitizer: DomSanitizer) {}

  // 安全地加载动态组件
  async loadSecureComponent(
    componentUrl: string,
    container: any
  ): Promise<boolean> {
    // 1. 验证URL
    if (!this.isTrustedSource(componentUrl)) {
      console.error('不信任的组件源:', componentUrl);
      return false;
    }

    // 2. 清理URL
    const safeUrl = this.sanitizer.sanitize(
      SecurityContext.URL,
      componentUrl
    );

    if (!safeUrl) {
      console.error('URL清理失败:', componentUrl);
      return false;
    }

    try {
      // 3. 使用沙箱加载（如果支持）
      const sandbox = this.createSandbox();

      // 4. 加载组件
      const module = await this.loadModuleFromUrl(safeUrl);

      // 5. 验证组件签名（如果有）
      if (!this.verifyComponentSignature(module)) {
        throw new Error('组件签名验证失败');
      }

      // 6. 安全检查
      if (!this.securityCheck(module)) {
        throw new Error('安全检查失败');
      }

      // 7. 创建组件
      const componentRef = container.createComponent(module.component);

      // 8. 监控组件行为
      this.monitorComponent(componentRef);

      return true;

    } catch (error) {
      console.error('安全加载失败:', error);
      return false;
    }
  }

  private isTrustedSource(url: string): boolean {
    try {
      const urlObj = new URL(url);
      return this.trustedSources.has(urlObj.origin);
    } catch {
      return false;
    }
  }

  private createSandbox(): any {
    // 创建沙箱环境（简化示例）
    // 实际实现可能需要iframe或Web Worker
    return {
      // 沙箱配置
    };
  }

  private async loadModuleFromUrl(url: string): Promise<any> {
    // 使用动态import，但需要webpack配置支持
    // 或者使用System.import、fetch+eval等
    const response = await fetch(url);
    const code = await response.text();

    // 严格限制执行环境
    const module = this.executeInSandbox(code);
    return module;
  }

  private executeInSandbox(code: string): any {
    // 在实际应用中，应该使用更安全的执行方式
    // 这里仅作示例
    try {
      const exports = {};
      const module = { exports };

      // 创建安全上下文
      const safeContext = {
        console,
        setTimeout,
        clearTimeout,
        // 限制其他全局对象访问
      };

      // 使用Function构造函数而不是eval
      const func = new Function('module', 'exports', 'context', `
        with(context) {
          ${code}
        }
      `);

      func(module, exports, safeContext);
      return module.exports;
    } catch (error) {
      throw new Error(`执行失败: ${error.message}`);
    }
  }

  private verifyComponentSignature(module: any): boolean {
    // 验证组件签名（如果有）
    // 实际应用中可能需要数字签名验证
    return true; // 简化实现
  }

  private securityCheck(module: any): boolean {
    // 执行安全检查
    const component = module.component || module.default;

    // 检查是否包含危险操作
    const blacklist = [
      'eval',
      'Function',
      'document.write',
      'innerHTML',
      'outerHTML',
      'insertAdjacentHTML'
    ];

    const componentCode = component.toString();
    return !blacklist.some(keyword => componentCode.includes(keyword));
  }

  private monitorComponent(componentRef: any): void {
    // 监控组件行为
    const originalMethods = {};

    // 包装危险方法
    const dangerousMethods = ['ngOnInit', 'ngAfterViewInit'];

    dangerousMethods.forEach(method => {
      if (componentRef.instance[method]) {
        originalMethods[method] = componentRef.instance[method];

        componentRef.instance[method] = (...args: any[]) => {
          console.log(`监控: 组件调用 ${method}`);

          // 添加安全检查
          try {
            return originalMethods[method].apply(componentRef.instance, args);
          } catch (error) {
            console.error(`组件方法 ${method} 执行错误:`, error);
            // 可以在此处销毁组件
          }
        };
      }
    });
  }
}

// dynamic-loader.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DynamicLoaderComponent } from './dynamic-loader.component';
import { AlertComponent } from './alert.component';
import { ComponentFactoryResolver } from '@angular/core';

describe('DynamicLoaderComponent', () => {
  let component: DynamicLoaderComponent;
  let fixture: ComponentFixture<DynamicLoaderComponent>;
  let resolver: ComponentFactoryResolver;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [DynamicLoaderComponent, AlertComponent],
      providers: [ComponentFactoryResolver]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(DynamicLoaderComponent);
    component = fixture.componentInstance;
    resolver = TestBed.inject(ComponentFactoryResolver);
    fixture.detectChanges();
  });

  it('应该创建组件', () => {
    expect(component).toBeTruthy();
  });

  it('应该能够动态加载Alert组件', () => {
    spyOn(component as any, 'loadComponent').and.callThrough();

    component.loadAlert();
    fixture.detectChanges();

    expect((component as any).loadComponent).toHaveBeenCalledWith('alert', jasmine.any(Object));
  });

  it('应该正确设置组件输入属性', () => {
    const testTitle = '测试标题';
    const testMessage = '测试消息';

    component.loadAlert();
    fixture.detectChanges();

    // 检查组件是否被创建
    const alertElement = fixture.nativeElement.querySelector('app-alert');
    expect(alertElement).toBeTruthy();

    // 检查输入属性
    // 需要通过组件实例来验证
  });

  it('应该能够销毁组件', () => {
    component.loadAlert();
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelector('app-alert')).toBeTruthy();

    component.destroyComponent();
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelector('app-alert')).toBeFalsy();
  });

  it('应该在组件销毁时清理资源', () => {
    spyOn(component, 'ngOnDestroy').and.callThrough();

    component.loadAlert();
    fixture.detectChanges();

    fixture.destroy();

    expect(component.ngOnDestroy).toHaveBeenCalled();
  });

  it('应该处理组件加载失败', () => {
    spyOn(console, 'error');
    spyOn(resolver, 'resolveComponentFactory').and.throwError('加载失败');

    component.loadAlert();
    fixture.detectChanges();

    expect(console.error).toHaveBeenCalled();
  });
});

// 模拟测试组件
@Component({
  template: '<div>测试组件</div>'
})
class TestComponent {}

describe('DynamicComponentLoading', () => {
  it('应该允许在运行时创建组件', () => {
    const resolver = TestBed.inject(ComponentFactoryResolver);
    const fixture = TestBed.createComponent(DynamicLoaderComponent);

    const factory = resolver.resolveComponentFactory(TestComponent);
    const componentRef = fixture.componentInstance.container.createComponent(factory);

    expect(componentRef).toBeTruthy();
    expect(componentRef.instance).toBeInstanceOf(TestComponent);
  });
});