在过go 的几天里，我一直在玩Angular 2，想知道是否有可能为@View装饰师提供动态templateUrl.
我试着给它传递一个函数，然后从中返回一个字符串，但是整个函数变成了一个字符串.
我还没用过Angular 1.所以我不知道我是不是用了错误的方法，但这是可能的，还是有更好的方法来创建动态视图？
例如，如果用户未登录，我可能希望显示一个表单，但如果用户已登录，我可能希望显示一条文本消息.
像这样的东西是行不通的:
@Component({
selector: 'my-component'
})
@View({
// This doesn't work
templateUrl: function() {
return this.isLoggedIn ? 'logged-in.html' : 'logged-out.html';
}
})
class MyComponent {
constructor() {
this.loggedIn = false;
}
}
任何帮助都将不胜感激.
虽然可能不是最优雅的解决方案，但我使用DynamicComponentLoader和ElementRef为组件动态分配模板值.事实上，我一直在寻找一种解决方案，可以在占位符中添加多个自定义组件.
我try 了shmck概述的函数中的服务注入，这不起作用，因为调用模板函数时服务还不可用.实际上，this指的是窗口对象.
我使用的解决方案的参考URL位于:create dynamic anchorName/Components with ComponentResolver and ngFor in Angular2
site Dartdocs提供了Angular 2 DynamicComponentLoader类的优秀文档，也适用于TypeScript.
简而言之:
一个简单的组件作为要使用的模板
@Component({
selector: 'dt2-simple-block',
properties: ["idx"],
template: `<h1>Simple block for {{ idx }} </h1>`,
directives: []
})
class dt2SimpleBlock {
constructor() {
}
}
包含要添加的所有组件的组件的构造函数(我的应用程序需要包含多个Child:
constructor(loader: DynamicComponentLoader, elementRef: ElementRef) {
//iterate
for (var i = 0; i < toSomething; i++) {
// build the template
var blockdirective = 'dt2-simple-block'
var template = '<' + blockdirective +
' idx="' + this.userBlocks.userHomePanelBlocks[i] +
'"></' + blockdirective + '>';
console.log(template); // debugging purpose
var directives = [dt2SimpleBlock];
loader.loadNextToLocation(toComponent(template, directives), elementRef);
}
以及要放在某个位置作为实用程序的帮助器函数
function toComponent(template, directives = []) {
@Component({ selector: 'fake-component' })
@View({ template, directives })
class FakeComponent { }
return FakeComponent;
}