DynamicComponentLoader：

Question

「要素でnoコンポーネントディレクティブ」私は、動的コンポーネントのロードfrom their docsのためのサンプルコードを撮影した

beta.6で働くことの角度DynamicComponentLoaderを取得し、それを追加することはできません彼らの作業開始コードはplnkr, see hereです。ここで

はコードだ： "要素でnoコンポーネントディレクティブはありません"：

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 

Answer 1

更新4（最終的な）

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'); 
    } 
} 

そして、ここでは述べているスタックトレースであり、

DynamicComponentLoaderは廃止予定です（commit参照）。正しい方法は、コンストラクタの例については、ViewContainerRefとComponentResolver（下記のupdate 3を参照）を使用することです。

---

---

はbeta.1では互換性に影響する変更がありました。コンストラクタ内のビューにはアクセスできなくなります。したがって、そのサンプルをngOnInit（）に移動すると、それが動作します。コンポーネントのコンストラクタが呼び出されたとき changelog

コンポーネントビューがまだ作成されていないから引用

。 - >コンポーネント

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

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

のビューにアクセスするために、ライフサイクルコールバックをoninitを使用して作業をあなたの例で、このplnkrをチェックしてください。

更新

ちょうどあなたの情報のために私は、ソースコードの例を修正する（#7186を参照）PRを送ってきました。だからうまくいけば、彼らはそれを見直し、それは合格するでしょう。

アップデート2

beta.16 loadIntoLocationを除去しないと、エラーがもはや再現可能であるたため。 loadNextToLocationはViewContainerRefになりました。私はそれの新しい例を追加するために新しいPR（#8241を参照）を開いた、他のすべてはすでに元のPRによって覆われている。

コード例（更新3）上述したよう

は今何loadIntoLocationありませんが、同じ現象がViewContainerRefとComponentResolverを使用することによって達成されます。loadNextToLocationについて

constructor(cmpResolver: ComponentResolver, viewContainer: ViewContainerRef) { 

    cmpResolver.resolveComponent(MyComponent) 
    .then((factory: ComponentFactory) => { 
     viewContainer.createComponent(factory, 0, viewContainer.injector) 
    }); 
} 

リファレンス

• ViewContainerRef#createComponent
• ComponentResolver#resolveComponent

、二つの方法、両方ViewContainerRefを使用するがあります。

• 図

// Assume the next view 
template : '<div #container></div>'; 

class MyClass { 
    @ViewChild('container', {read: ViewContainerRef}) container : ViewContainerRef; 

    constructor(private dcl: DynamicComponentLoader) {} 

    ngAfterViewInit() { 
     this.dcl.loadNextToLocation(MyDynamicCmp, this.container).then(ref => {}); 
    } 
} 

上記の例をplnkrにいくつかの要素を使用して素子自体

constructor(private dcl: DynamicComponentLoader, viewContainer: ViewContainerRef) { 
    dcl.loadNextToLocation(MyComponent, viewContainer).then(ref => {}); 
} 

• からViewContainerRefを使用します。