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({

  selector: 'dt2-simple-block',

  properties: ["idx"],

  template: `<h1>Simple block for  {{ idx }} </h1>`,

  directives: []

})

class dt2SimpleBlock {

  constructor() {

  }

}

包含所有要添加的组件的Component的构造方法（我的应用程序要求包含多个子元素：

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

    }

并将辅助功能作为util放置在某处

function toComponent(template, directives = []) {

  @Component({ selector: 'fake-component' })

  @View({ template, directives })

  class FakeComponent { }

  return FakeComponent;

}

Answer 2

我的解决方案：

Angular 2.0 ViewResolver类

class myViewResolver extends ViewResolver{

    resolve(component: Type): ViewMetadata {        

        var view =  super.resolve(component);

        // TODO: Write logic here:-)

        view.templateUrl = 'app/app.html';

        return view;

    }

}

bootstrap(App,[

    provide(ViewResolver , {useClass:myViewResolver})

]);