如何为 Angular2 组件提供动态 templateUrl? [英] How can I have dynamic templateUrl for Angular2 Component?

问题描述

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

I wanted to load component templateUrl based on value passed from parent component. I know tt can be pass through property binding to component by have @Input, I gave example below in which myHtml will be passed as templateName.

.但是没有能力访问templateUrl 函数内的@Input 值.我认为 templateUrl 是首先通过请求 HTML 来评估的东西，之后所有其他组件代码都被执行了.

.But there is no ability to access @Input value inside templateUrl function. I think templateUrl is the first thing going to evaluate by asking for HTML, after that all other component code gets executed.

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

Like in angular 1 has ability to pass some value from attribute, & then I can use that value inside templateUrl function as a parameter like below.

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

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

But same thing I can't do in Angular2, as templateUrl is strongly typed as string so it doesn't take function as an attribute.

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

Is there a way to achieve this OR I missed something simple?

编辑

我已经看过这个答案我想要.在引用的答案中，它使用加载另一个组件的 DynamicComponentLoader 呈现 DOM.

I've already looked at this answer which isn't what I want. In referred answer, it render DOM using DynamicComponentLoader which loads another component.

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

This is not what I wanted, because creating new separate component for having different templateUrl doesn't make sense in mine case.

知道如何实现这一点吗?

Any idea how do I implement this?

推荐答案

一直在努力解决类似的问题，但不幸的是你不能这样做.组件模板在运行时编译.所以，基本上，我会制作一个编译其他子组件的组件(我确实这样做了)

Been struggling with something similar, but unfortunately you can't do this. Component templates are compiled at runtime. So, basically, I would make a component that compiles other child components (which I actually did)

DynamicComponentLoader 已被弃用.您需要使用 ComponentResolver 类来加载主组件中的其他组件，如下所示:

DynamicComponentLoader is beign deprecated. You need to use the ComponentResolver class to load other components inside the main one, like so:

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

这篇关于如何为 Angular2 组件提供动态 templateUrl?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！