在Angular2 +组件中动态加载NgContent

时间:2017-08-04 20:05:11

标签: angular dart angular-dart

我正在使用Angular2 Dart 3.1.0。我正在动态加载一个组件,我想知道是否有一种方法可以输入<ng-content></ng-content>的内容。我正在动态加载第三方组件,因此我无法替换ng-content使用情况。

我已经汇总了我当前实现的简化示例:

import 'dart:async';

import 'package:angular2/angular2.dart';

@Component(
    selector: 'dynamic-component',
    template: '''<div class="header">{{header}}</div>
                 <div><ng-content></ng-content></div>
                 <div class="footer">{{footer}}</div>''')
class DynamicComponent {
  @Input()
  String header;

  @Input()
  String footer;
}


@Component(
    selector: 'wrapper-component',
    template: '')
class WrapperComponent {
  final ViewContainerRef _viewContainerRef;
  final ComponentResolver _componentResolver;

  WrapperComponent(this._viewContainerRef, this._componentResolver);

  Future renderDynamicComponent() async {
    var componentFactory = await _componentResolver.resolveComponent(DynamicComponent);
    ComponentRef<DynamicComponent> componentRef = _viewContainerRef.createComponent(componentFactory);
    componentRef.instance
      ..header = header
      ..footer = footer;
  }
}

0 个答案:

没有答案