![](/img/trans.png)
[英]How to force an Angular Component to load up external script in its template
[英]How to dynamically load external template in Angular 2 Component?
在角1,我們可以使用templateUrl到如下動態地加載不同的外部模板。
angular.module('testmodule).diretive('testDirective'), function(){
return {
restrict: 'EA',
replace: true,
scope: {
data: '@',
},
templateUrl: function(element, attrs) {
if(attrs.hasOwnProperty("attr")){
return "views/test1.html";
} else {
return "views/test2.html";
}
}
}
我的問題是如何在Angular 2組件下面實現相同的功能?
@Component({
selector: 'testDirective, [testDirective]',
template: require('./views/test1.html') or require ('./views/test2.html')
})
export class Angular2Component {
...
}
如果要動態加載組件
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
addComponent(){
var comp = this._cfr.resolveComponentFactory(ExpComponent);
var expComponent = this.container.createComponent(comp);
}
如果您只想更改模板網址,請嘗試這樣:
@Component({
selector: 'app-simple-component',
templateUrl: "{{tmplUrl}}"
})
class SomeComponent {
tmplUrl: string= 'views/test1.html';
constructor() {
if(attrs.hasOwnProperty("attr")){
this.tmplUrl ="views/test1.html";
} else {
this.tmplUrl ="views/test2.html";
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.