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

问题描述

我想基于从父组件传递的值加载组件templateUrl.我知道tt可以通过具有@Input来通过property binding传递到组件，我在下面给出了一个示例，其中myHtml将作为templateName传递.

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.

像角度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.

有没有办法实现这个 OR 我错过了一些简单的事情?

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屋！