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

问题描述

我不是使用typcript，但 ES6 和angular2 alpha39 可以动态加载组件。以下代码与我的应用程序中的代码类似我注意到的是，角度2 不会创建一个 DynamicComponentLoader 或 ElementRef 的实例，并注入到构造函数中。它们是未定义的。

如何使用 ES6和angular2 alpha39 注入DynamicComponentLoader？

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $






$ 'dc'，
绑定：[DynamicComponentLoader]
}）
@View（{
template：'< b>一些模板< / 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'）;
}
}

解决方案

如果你想在ES7中编写代码，我认为在这个时候最简洁的方法来指定注入是使用静态getter来获取参数：

  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]]; 
} 
 
构造函数（dynamicComponentLoader，elementRef）{
 dynamicComponentLoader.loadIntoLocation（DynamicComponent，elementRef，'container'）; 
} 
} 
  

请参阅这个plunker

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

 从angular2 / angular2导入{ComponentMetadata，ViewMetadata，DynamicComponentLoader，ElementRef}; 
 
 export class App {
 
 static get annotations（）{
 return [
 new ComponentMetadata（{
 selector：'app'
}），
 new ViewMetadata（{
 template：'< div＃container>< / b>'
}）
]; 
} 
 
 static get parameters（）{
 return [[DynamicComponentLoader]，[ElementRef]]; 
} 
 
构造函数（dynamicComponentLoader，elementRef）{
 dynamicComponentLoader.loadIntoLocation（DynamicComponent，elementRef，'container'）; 
} 
} 
  

请参阅这个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屋！