DynamicComponentLoader在Angular2测试：＆QUOT;在元件QUOT没有组件指令; [英] DynamicComponentLoader in Angular2 beta: "no component directive at element"

问题描述

我不能让角的DynamicComponentLoader在beta.6工作

我已经采取了例如code动态元件装载<一个href=\"https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html#!#sts=loadIntoLocation(type:%20Type,%20hostLocation:%20ElementRef,%20anchorName:%20string,%20providers%3F:%20ResolvedProvider%5B%5D,%20projectableNodes%3F:%20any%5B%5D%5B%5D)%20:%20Promise%3CComponentRef%3E\"相对=nofollow>从他们的文档，并把它添加到他们的工作启动code中的 plnkr，看到这里。

这里的code：

 进口{组件，DynamicComponentLoader，ElementRef}从'angular2 /核心;
@零件（{
  选择：儿童分量'，
  模板：'儿童'
}）
类ChildComponent {
}
@零件（{
    选择：我的应用，
    模板：'＆LT; H1＆gt;我的第一角2应用＆LT; / H1＆GT;＆LT; D​​IV＃儿童及GT;＆LT; / DIV＆GT;'
}）
出口类AppComponent {
  构造器（DCL：DynamicComponentLoader，elementRef：ElementRef）{
    dcl.loadIntoLocation（ChildComponent，elementRef，'孩子'）;
  }
}
 

这里是堆栈跟踪，它说：有是没有的元素组成指令

 异常：价格AppComponent实例化过程中的错误.BrowserDomAdapter.logError @ angular2.dev.js：23083
angular2.dev.js：23083原始异常：有一个在元素[对象的对象]无组件指令BrowserDomAdapter.logError @ angular2.dev.js：23083
angular2.dev.js：23083 ORIGINAL堆栈跟踪：BrowserDomAdapter.logError @ angular2.dev.js：23083
angular2.dev.js：23083错误：没有组件指令的元素[对象的对象]
    在新BaseException（angular2.dev.js：7351）
    在AppViewManager_.getNamedElementInComponentView（angular2.dev.js：6441）
    在DynamicComponentLoader_.loadIntoLocation（angular2.dev.js：12375）
    在新AppComponent（run.plnkr.co/mk31ybnwEtsiX31r/app/app.component.ts!transpiled:33）
    在angular2.dev.js：1420
    在Injector._instantiate（angular2.dev.js：11459）
    在Injector._instantiateProvider（angular2.dev.js：11395）
    在Injector._new（angular2.dev.js：11385）
    在InjectorInlineStrategy.instantiateProvider（angular2.dev.js：11149）
    在ElementDirectiveInlineStrategy.init（angular2.dev.js：9081）BrowserDomAdapter.logError @ angular2.dev.js：23083
angular2.dev.js：23083错误上下文：BrowserDomAdapter.logError @ angular2.dev.js：23083
angular2.dev.js：23083 _ContextcomponentElement：nullelement：我-appinjector：Injector__proto__：_ContextBrowserDomAdapter.logError @ angular2.dev.js：23083
angular2-polyfills.js：1152 DE preCATION警告：'dequeueTask'不再支持，并会在下一主要版本中删除。使用removeTask / removeRepeatingTask / removeMicroTask
 

解决方案

在beta.1有一个重大更改。你不能在构造函数中再访问该视图。所以，你可以移动的例子ngOnInit（），它会正常工作。

从的changelog

  

尚未创建组件视图组件时，构造函数被调用。 - >使用的OnInit生命周期回调访问组件的视图

出口类AppComponent {
  构造函数（私人DCL：DynamicComponentLoader，私人elementRef：ElementRef）{  }
  ngOnInit（）{
    this.dcl.loadIntoLocation（ChildComponent，this.elementRef，'孩子'）;
  }
}


勾选此 plnkr 与你的榜样工作。

更新

只是为了您的信息，我已经派出一个公关（见＃7186 ）至修复源$ C ​​$ c中的例子。所以希望他们会检讨它，它会通过。

I can't get angular's DynamicComponentLoader to work in beta.6

I've taken the example code for dynamic component loading from their docs, and added it to their working starter code in plnkr, see here.

Here's the code:

import {Component, DynamicComponentLoader, ElementRef} from 'angular2/core';


@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}


@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1><div #child></div>'
})
export class AppComponent { 
  constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
    dcl.loadIntoLocation(ChildComponent, elementRef, 'child');
  }
}

And here is the stacktrace, which says: "There is no component directive at element":

EXCEPTION: Error during instantiation of AppComponent!.BrowserDomAdapter.logError @ angular2.dev.js:23083
angular2.dev.js:23083 ORIGINAL EXCEPTION: There is no component directive at element [object Object]BrowserDomAdapter.logError @ angular2.dev.js:23083
angular2.dev.js:23083 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23083
angular2.dev.js:23083 Error: There is no component directive at element [object Object]
    at new BaseException (angular2.dev.js:7351)
    at AppViewManager_.getNamedElementInComponentView (angular2.dev.js:6441)
    at DynamicComponentLoader_.loadIntoLocation (angular2.dev.js:12375)
    at new AppComponent (run.plnkr.co/mk31ybnwEtsiX31r/app/app.component.ts!transpiled:33)
    at angular2.dev.js:1420
    at Injector._instantiate (angular2.dev.js:11459)
    at Injector._instantiateProvider (angular2.dev.js:11395)
    at Injector._new (angular2.dev.js:11385)
    at InjectorInlineStrategy.instantiateProvider (angular2.dev.js:11149)
    at ElementDirectiveInlineStrategy.init (angular2.dev.js:9081)BrowserDomAdapter.logError @ angular2.dev.js:23083
angular2.dev.js:23083 ERROR CONTEXT:BrowserDomAdapter.logError @ angular2.dev.js:23083
angular2.dev.js:23083 _ContextcomponentElement: nullelement: my-appinjector: Injector__proto__: _ContextBrowserDomAdapter.logError @ angular2.dev.js:23083
angular2-polyfills.js:1152 DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next major release. Use removeTask/removeRepeatingTask/removeMicroTask

解决方案

In beta.1 there was a breaking change. You can't access anymore the view in the constructor. So you can move that example to ngOnInit() and it will work.

Quoting from the changelog

Component view is not yet created when component constructor is called. -> use onInit lifecycle callback to access the view of a component

export class AppComponent { 
  constructor(private dcl: DynamicComponentLoader, private elementRef: ElementRef) {

  }
  ngOnInit() {
    this.dcl.loadIntoLocation(ChildComponent, this.elementRef, 'child');
  }
}

Check this plnkr with your example working.

Update

Just for your information I've sent a PR (see #7186) to fix the examples in the source code. So hopefully they will review it and it will pass.

这篇关于DynamicComponentLoader在Angular2测试：＆QUOT;在元件QUOT没有组件指令;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！