我是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();
 }
}
dart angular-dart