分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何为Angular2 Component提供动态templateUrl？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我想根据从父组件传递的值加载组件templateUrl.我知道可以通过@Input通过属性绑定到组件,我在下面举例说明my Html将作为templatename传递.

但是没有能力访问templateUrl函数中的@Input值.我认为templateUrl是第一个通过询问HTML来评估的东西,之后所有其他组件代码都被执行了.

就像角度1一样,能够从属性中传递一些值,&然后我可以在templateUrl函数中使用该值作为如下参数.

templateUrl: function(element,attrs){
    //was getTing value
    return '/app/templates/'+ attrs.myTemplatename + '.html'
}

但同样的事情我不能在Angular2中做,因为templateUrl被强类型化为字符串,因此它不会将函数作为属性.

有没有办法实现这一点或我错过了一些简单的东西？

编辑

我已经看过this answer这不是我想要的.在参考答案中,它使用DynamicComponentLoader渲染DOM,后者加载另一个组件.

这不是我想要的,因为在我的情况下创建具有不同templateUrl的新单独组件是没有意义的.

知道我该如何实现这个？

解决方法

一直在努力与类似的东西,但不幸的是你不能这样做.组件模板在运行时编译.所以,基本上,我会创建一个组件来编译其他子组件(我实际上是这样做的)

不推荐使用DynamicComponentLoader.您需要使用ComponentResolver类来加载主要组件中的其他组件,如下所示：

function makeComponent( SELEctor,template,...more )
{
  @Component({ SELEctor: SELEctor,template: template })
  class FakeComponent {}
  return FakeComponent;
}

@Component({ ... })
export class MainCmp implements OnInit
{
  // place to insert
  @ViewChild('viewChild',{read: ViewContainerRef}) viewChild: ViewContainerRef;

  constructor(private compiler: ComponentResolver){}
  // or OnChanges,or event binding.. should work

  ngOnInit()
  {
    // decide on your custom logic here,get you @Input,whatever...

    // and you can actually make some custom dynamic component...
    let childCmp = makeComponent( custom,stuff,here );

    // compile then insert in your LOCATIOn,defined by viewChild
    this.compiler.resolveComponent( childCmp )
      .then( (compFactory:ComponentFactory) => this.viewChild.createComponent(compFactory) )
  }
}