我怎样才能拥有 Angular2 组件的动态 templateUrl？

Question

我想根据从父组件传递的值加载组件templateUrl。我知道 tt 可以通过 property binding 通过 @Input 传递给组件，我在下面给出了示例，其中 myHtml 将作为 templateName 传递。

. 但是在templateUrl 函数中无法访问@Input 值。我认为templateUrl 是通过请求 HTML 来评估的第一件事，然后执行所有其他组件代码。

就像 angular 1 一样，它能够从属性中传递一些值，然后我可以在 templateUrl 函数中使用该值作为参数，如下所示。

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

但是我在 Angular2 中不能做同样的事情，因为 templateUrl 被强类型化为 string 所以它不会将函数作为属性。

有没有办法做到这一点或我错过了一些简单的事情？

编辑

我已经看过this answer，这不是我想要的。在引用的答案中，它使用加载另一个组件的DynamicComponentLoader 渲染 DOM。

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

知道如何实现吗？

Answer 1

一直在为类似的事情苦苦挣扎，但不幸的是你不能这样做。组件模板在运行时编译。所以，基本上，我会制作一个编译其他子组件的组件（我实际上是这样做的）

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