Angular 2中的动态模板URL

Question

我一直在玩弄角2在过去的几天，不知道是否有可能提供一个动态templateUrl的@View装饰。

我尝试过将其传递给一个函数并从中返回一个字符串，但是整个函数都变成了字符串。

我之前也没有真正使用过Angular 1.x，所以我不知道我是否只是以错误的方式进行操作，但这是否可能，或者有没有更好的方法来创建动态视图？

例如，如果用户未登录，我可能要显示一个表单，但如果用户登录，则要显示文本消息。

像这样的东西不起作用：

@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;

  }

}

任何帮助，将不胜感激。

Answer 1

尽管可能不是最优雅的解决方案，但我使用DynamicComponentLoader和ElementRef将模板值动态分配给组件。实际上，我在寻找一种解决方案，可以将多个自定义组件添加到占位符中。我尝试了shmck概述的函数中的服务注入，由于调用模板函数时服务尚不可用，因此无法正常工作。确实，this是指Window对象。我使用的解决方案的参考URL可在以下位置找到：在Angular2中使用ComponentResolver和ngFor创建动态的anchorName / Components我也将此方式称为Plnkr1和Plnkr2。Dartdocs网站提供了有关Angular 2 DynamicComponentLoader类的出色文档，该类也适用于TypeScript。简而言之：一个简单的组件作为要使用的模板@Component({&nbsp; selector: 'dt2-simple-block',&nbsp; properties: ["idx"],&nbsp; template: `<h1>Simple block for&nbsp; {{ idx }} </h1>`,&nbsp; directives: []})class dt2SimpleBlock {&nbsp; constructor() {&nbsp; }}包含所有要添加的组件的Component的构造方法（我的应用程序要求包含多个子元素：&nbsp;constructor(loader: DynamicComponentLoader, elementRef: ElementRef) {&nbsp; //iterate&nbsp; for (var i = 0; i < toSomething; i++) {&nbsp; &nbsp; &nbsp; // build the template&nbsp; &nbsp; &nbsp; var blockdirective = 'dt2-simple-block'&nbsp; &nbsp; &nbsp; var template = '<' + blockdirective +&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;' idx="' + this.userBlocks.userHomePanelBlocks[i] +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'"></' + blockdirective + '>';&nbsp; &nbsp; &nbsp; console.log(template);&nbsp; &nbsp;// debugging purpose&nbsp; &nbsp; &nbsp; var directives = [dt2SimpleBlock];&nbsp; &nbsp; &nbsp; &nbsp; loader.loadNextToLocation(toComponent(template, directives), elementRef);&nbsp; &nbsp; }并将辅助功能作为util放置在某处function toComponent(template, directives = []) {&nbsp; @Component({ selector: 'fake-component' })&nbsp; @View({ template, directives })&nbsp; class FakeComponent { }&nbsp; return FakeComponent;}

Answer 2

我的解决方案：Angular 2.0 ViewResolver类class myViewResolver extends ViewResolver{&nbsp; &nbsp; resolve(component: Type): ViewMetadata {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var view =&nbsp; super.resolve(component);&nbsp; &nbsp; &nbsp; &nbsp; // TODO: Write logic here:-)&nbsp; &nbsp; &nbsp; &nbsp; view.templateUrl = 'app/app.html';&nbsp; &nbsp; &nbsp; &nbsp; return view;&nbsp; &nbsp; }}bootstrap(App,[&nbsp; &nbsp; provide(ViewResolver , {useClass:myViewResolver})]);