どのように私はそれをコンポーネント</li> </ol> <p>を返す場所</li> <li>Iを与える、私は</p> <ol> <li>によってその場でAngular2コンポーネントを作成しようとしているのdiv

Question

に動的にAngular2コンポーネントをロードしますDynamicComponentLoaderは非推奨で、ViewContainerRefとComponentResolverに行きましたが、リゾルバがコンポーネントを適切に作成しているとは思いません。それは最後に追加するだけです。

私は間違っていますか？

私はソースコードとplnkr作成しました：多分あなたはこの

const injector = ReflectiveInjector.fromResolvedProviders([], this._viewContainer.parentInjector); 
this._currentComponentRef = this._viewContainer.createComponent(factory, 0, injector, []); 

代わりの

this.viewContainer.createComponent(factory, 0, this.viewContainer.injector)); 

ここ http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/を見てみるを使用する必要がありますhttp://plnkr.co/edit/a2esZiVpiV5f1r4uEufX?p=preview

@Component({ 
    selector : 'marker-component', 
    template : '<strong>OH BABY ITS WORKING</strong>' 
}) 
class MarkerComponent { 

} 

@Component({ 
    selector: 'my-app', 
    template : ` 
    <div id="map"></div> 
    ` 
}) 
export class App implements NgOnInit { 

    map: any 

    constructor(
    private compiler: ComponentResolver, 
    private viewContainer: ViewContainerRef) { 

    } 

    ngOnInit() { 
    this.map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 9); 
    var cssIcon = L.divIcon({ 
     // Specify a class name we can refer to in CSS. 
     className: 'css-icon', 
     html: `<marker-component></marker-component>`, 
     iconSize: [60, 60] 
    }); 
    L.marker([40, -74.50], {icon: cssIcon}).addTo(this.map); 

    this.compiler.resolveComponent(MarkerComponent).then((factory) => 
     this.viewContainer.createComponent(factory, 0, this.viewContainer.injector)); 
    } 
} 

bootstrap(App, [...HTTP_PROVIDERS]).catch(err => console.error(err)); 

Answer 1

を