如何使用ES6 angular2 DynamicComponentLoader？ [英] How to use angular2 DynamicComponentLoader in ES6?

问题描述

我的不可以使用打字稿，但 ES6 并angular2 alpha39 可动态加载的组件。下面code是类似于我在我的应用程序。我注意到是的 angular2 的不创建的 DynamicComponentLoader 的实例也的 ElementRef 的并注入到构造。他们是不确定的。

我该怎么办DynamicComponentLoader使用的 ES6注入和angular2 alpha39

 进口{组件，景观，注入，DynamicComponentLoader，ElementRef}从'angular2 / angular2@零件（{
  选择：DC，
  绑定：[DynamicComponentLoader]
}）
@视图（{
  模板：'＆LT; B＆GT;有的模板＆LT; / B＆GT;'
}）类DynamicComponent {}@零件（{
  选择：我的应用
}）
@视图（{
  模板：'＆LT; D​​IV＃集装箱＆GT;＆LT; / DIV＆GT;'
}）
@Inject（DynamicComponentLoader）
@Inject（ElementRef）
出口类应用{
  构造函数（
    dynamicComponentLoader，
    elementRef
  ）{
    dynamicComponentLoader.loadIntoLocation（DynamicComponent，elementRef，'集装箱'）;
  }
}
 

解决方案

如果你想要写在ES7 code，我觉得在这个时候，以指定注射用最简洁的方法是使用静态getter方法​​参数：

进口{组件，查看，DynamicComponentLoader，ElementRef}从'angular2 / angular2@零件（{
  选择：我的应用
}）
@视图（{
  模板：'＆LT; D​​IV＃集装箱＆GT;＆LT; / B＆GT;'
}）
出口类应用{  静态get参数（）{
    返回[[DynamicComponentLoader]，[ElementRef]];
  }  构造函数（dynamicComponentLoader，elementRef）{
    dynamicComponentLoader.loadIntoLocation（DynamicComponent，elementRef，'集装箱'）;
  }
}


请参阅这plunker

如果你想写在ES6 code，它不支持的装饰，还必须使用注释属性静态吸气。在这种情况下，你必须导入 ComponentMetadata 和 ViewMetadata 而不是组件和查看例如：

进口{ComponentMetadata，ViewMetadata，DynamicComponentLoader，ElementRef}从'angular2 / angular2';出口类应用{  静态得到注解（）{
    返回[
      新ComponentMetadata（{
        选择：应用程序
      }），
      新ViewMetadata（{
        模板：'＆LT; D​​IV＃集装箱＆GT;＆LT; / B＆GT;'
      }）
    ];
  }  静态get参数（）{
    返回[[DynamicComponentLoader]，[ElementRef]];
  }  构造函数（dynamicComponentLoader，elementRef）{
    dynamicComponentLoader.loadIntoLocation（DynamicComponent，elementRef，'集装箱'）;
  }
}


请参阅这plunker

I'm not using typescript but ES6 and angular2 alpha39 to load a component dynamically. The following code is similar to what I have in my app. What I have noticed is angular2 does not create an instance of DynamicComponentLoader nor ElementRef and inject into the constructor. They are undefined.

How can I do the injection of DynamicComponentLoader using ES6 and angular2 alpha39?

import {Component, View, Inject, DynamicComponentLoader, ElementRef } from 'angular2/angular2'

@Component({
  selector: 'dc',
  bindings: [ DynamicComponentLoader ]
})
@View({
  template: '<b>Some template</b>'
})

class DynamicComponent {}

@Component({
  selector: 'my-app'
})
@View({
  template: '<div #container></div>'
})
@Inject(DynamicComponentLoader)
@Inject(ElementRef)
export class App {
  constructor(
    dynamicComponentLoader, 
    elementRef
  ) {
    dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
  }
}

解决方案

If you want to write code in ES7, I think the most concise approach to specify injections at this time is to use static getter for parameters:

import {Component, View, DynamicComponentLoader, ElementRef } from 'angular2/angular2'

@Component({
  selector: 'my-app'
})
@View({
  template: '<div #container></b>'
})
export class App {

  static get parameters() {
    return [[DynamicComponentLoader], [ElementRef]];  
  }

  constructor(dynamicComponentLoader, elementRef) {
    dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
  }
}

See this plunker

If you want to write code in ES6, which doesn't support decorators, you must also use static getter for annotations property. In this case you must import ComponentMetadata and ViewMetadata instead of Component and View For example:

import {ComponentMetadata, ViewMetadata, DynamicComponentLoader, ElementRef } from 'angular2/angular2';

export class App {

  static get annotations() {
    return [
      new ComponentMetadata({
        selector: 'app'
      }),
      new ViewMetadata({
        template: '<div #container></b>'
      })
    ];
  }

  static get parameters() {
    return [[DynamicComponentLoader],[ElementRef]];  
  }

  constructor(dynamicComponentLoader, elementRef) {
    dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
  }
}

See this plunker

这篇关于如何使用ES6 angular2 DynamicComponentLoader？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！