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

Question

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

。但无法访问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) )
  }
}