带有angular2函数的templateUrl

Posted 2023-02-19

【中文标题】带有angular2函数的templateUrl

【英文标题】：templateUrl with a function in angular2

【发布时间】：2016-07-04 16:54:59

【问题描述】：

嗯...角度为 1.x.y 是

angular.module('myApp', []).directive('myDirective', function()
    return 
       templateUrl : function(tElement, iAttrs)
           return 'http://' + iAttrs.myDirective // More...
        
    
);

但是.. 在 Angular2 中

@Component(
    selector: 'my-Directive',
    templateUrl: 'http://???' 
)
class HelloWorld 

好吧，在doc 中只说String。因为它被处理为 angular2 中的一个函数？

【问题讨论】：

使用 templateUrl: 'http://...'

类似this question的问题没有答案...

@pixelbits OP 想要，动态 templateUrl 基于从父组件传递的值。我昨天问的类似问题，但没有找到任何答案。你能看看我之前的评论吗也是。

组件模板在运行时由 Angular 编译器在 Angular 2 中编译。因此，您不能使用函数动态选择模板。编辑：您可以通过创建一个组件来解决此问题，该组件使用dynamic component loader 动态创建一个组件，然后在您的父组件中显示它。

【参考方案1】：

我必须实现类似的东西，我的解决方案与上面 Thomas Gassmann 的评论相同，所以我决定分享。

目前（angular 4.4.5）@Component 装饰器只接受一个字符串，因此模板不像 angularJS 那样动态编译。但是，您可以实现多个组件并动态切换组件。示例如下：

https://stackblitz.com/edit/angular-dynamic-templateurl

【讨论】：

这个想法，是在服务器中的模板说errors/timeout.html，errors/input_error.html ....等等