在角2动态模板网址 [英] Dynamic template URLs in Angular 2

问题描述

我已经用角2玩弄在过去的几天，不知道是否有可能提供一个动态的 templateUrl 到 @查看装饰。

I've been playing around with Angular 2 for the past few days and wondered if it was possible to provide a dynamic templateUrl to the @View decorator.

我试图传递给它的函数，并返回一个字符串形式，但整个函数刚刚得到的变成了一个字符串。

I have tried passing it a function and returning a string form it but the entire function just get's turned into a string.

我还没有真正使用1.x的角度或者之前，所以我不知道如果我只是要对此错误的方式，但这种可能，或有更好的方法来创建动态的观点？

I haven't really used Angular 1.x before either so I don't know if I'm just going about this in the wrong way, but is this possible, or is there a better way to create dynamic views?

例如我可能想显示一种形式，如果用户没有登录，但如果他们在记录显示文本消息。

For example I might want to display a form if the user is not logged in, but display a text message if they are logged in.

像这样的东西不起作用：

Something like this doesn't work:

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

任何帮助将是AP preciated。

Any help would be appreciated.

推荐答案

虽然也许不是最优雅的解决方案，我用DynamicComponentLoader和ElementRef到模板值动态地分配给一个组件。其实，我一直在寻找一个解决方案，我可以添加多个自定义组件到占位符。

Although maybe not the most elegant solution, I used the DynamicComponentLoader and ElementRef to dynamically assign template value to a component. In fact, I was looking for a solution where I can add multiple custom components into a placeholder.

我试图在功能服务注射shmck所概述本当模板函数被调用不起作用的服务尚未公布。事实上，这个指的是Window对象。

I tried service injection in the function as outlined by shmck this doesn't work as the services are not available yet when the template function is called. Indeed, this refers to the Window object.

对于我用过的解决方案，参考网址上找到：<一href=\"http://stackoverflow.com/questions/32977271/create-dynamic-anchorname-for-dynamiccomponentloader-with-ng-for-in-angular2\">create动态anchorName为DynamicComponentLoader与NG-在Angular2

Reference URLs for the solution I used are to be found on: create dynamic anchorName for DynamicComponentLoader with ng-for in Angular2

我也这样参考 Plnkr1 并的 Plnkr2 。

该网站 Dartdocs 提供角2 DynamicComponentLoader类不错的文档，也适用于打字稿。

The site Dartdocs provides nice documentation on Angular 2 DynamicComponentLoader class, also applicable to TypeScript.

在短：

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

A simple Component as the to be used template

@Component({
  selector: 'dt2-simple-block',
  properties: ["idx"],
  template: `<h1>Simple block for  {{ idx }} </h1>`,
  directives: []
})
class dt2SimpleBlock {
  constructor() {
  }
}

这包含所有的组件添加组件的构造函数（我的应用程序需要被列入多个孩子的：

Constructor of the Component that holds all Components to be added (my app requires multiple childs to be included:

 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

And the helper function to be put somewhere as util

function toComponent(template, directives = []) {
  @Component({ selector: 'fake-component' })
  @View({ template, directives })
  class FakeComponent { }

  return FakeComponent;
}

这篇关于在角2动态模板网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！