Angular 2中的动态模板URL

小编典典

Angular 2中的动态模板URL

javascript

我一直在玩弄角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;
  }
}

任何帮助，将不胜感激。

阅读 498

2020-05-01

共1个答案

小编典典

尽管可能不是最优雅的解决方案，但我使用DynamicComponentLoader和ElementRef将模板值动态分配给组件。实际上，我在寻找一种可以在占位符中添加多个自定义组件的解决方案。

我尝试了shmck概述的函数中的服务注入，由于调用模板函数时服务尚不可用，因此无法使用。确实，this是指Window对象。

简而言之：

一个简单的组件作为要使用的模板

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

2020-05-01