AngularDart - 将组件动态添加到另一个

Question

我是dart的新手，我试图将一个组件注入到父组件中，就像我之前在angular 5中所做的那样。但是，没有任何东西被渲染并附加到DOM。这是我注入父组件的一项服务，试图动态添加动态添加子组件。

我也在使用最新的Dart 2.0 sdk。也没有运行时错误。它执行并且不会向dom添加任何内容。

@Injectable()
class ComponentService {
  ViewContainerRef _rootViewContainer;
  ComponentResolver _componentResolver;

  ComponentService(this._componentResolver);

  setRootViewContainerRef(viewContainerRef) {
    _rootViewContainer = viewContainerRef;
  }

  addComponent() {
    final factory =
    _componentResolver.resolveComponentSync(MyCustomComponent);
    final component = 
    factory.create(_rootViewContainer.parentInjector);
    _rootViewContainer.clear();
    _rootViewContainer.insert(component.hostView);
   }
}

动态注入的组件

@Component(
selector: 'my-custom-component',
template: '<h1>My Component Details></h1>')
class MyCustomComponent implements OnInit {

  MyCustomComponent();

  @override
  Future<Null> ngOnInit() async {}
}

作为我如何使用它的一个例子。

@Component(
selector: 'side-panel',
template: '''<div class="pt-12" #dynamic>

            </div>''',
directives: const [CORE_DIRECTIVES],
providers: const [ComponentService])
class SidePanelComponent implements OnInit {

 ViewContainerRef _viewContainerRef;
 get viewContainerRef=>_viewContainerRef;
 @ViewChild('dynamic', read: ViewContainerRef)
 set viewContainerRef(val)=> _viewContainerRef = val;

 ComponentService _componentService;

 SidePanelComponent(this._componentService);

 @override
 Future<Null> ngOnInit() async {
  _componentService.setRootViewContainerRef(_viewContainerRef);
  _sideNavHelperService.getSidenav('quick-panel').toggle();
 }
}