Angular2 动态模板或 ng-include

使用 Angular 2 的动态模板和 ng-include 实现模块化开发

typescript
import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
@Component({
  selector: 'app-dynamic-template',
  template: `
    
    加载动态组件
  `
})
export class DynamicTemplateComponent {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) dynamicContainer: ViewContainerRef;
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
  loadDynamicComponent() {
    // 动态加载组件
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    this.dynamicContainer.clear(); // 清空容器
    const componentRef = this.dynamicContainer.createComponent(componentFactory);
    // 可以通过 componentRef.instance 访问动态创建的组件实例
  }
}
@Component({
  selector: 'app-dynamic',
  template: '
动态加载的组件
'
})
export class DynamicComponent {}

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-ng-include-example',
  template: `
    
      
使用 ng-include 包含外部模板
      
        
      
      
        
Loading...
      
    
  `
})
export class NgIncludeExampleComponent {
  includeTemplate: boolean = true; // 控制是否加载外部模板
  dynamicTemplate: any = `
    
      
这是动态加载的模板
    
  `;
}