如何为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屋!