角度2的动态模板 URL

小开

最佳答案

虽然可能不是最优雅的解决方案，但是我使用 DynamicComponent entLoader 和 ElementRef 动态地为组件分配模板值。事实上，我正在寻找一种解决方案，可以将多个自定义组件添加到占位符中。

我尝试在 shmck 所描述的函数中进行服务注入，但这不起作用，因为在调用模板函数时服务还不可用。事实上，this指的是 Window 对象。

我使用的解决方案的参考 URL 位于: 用 Angular2中的 Component entResolver 和 ngFor 创建动态锚名/组件

我也以这种方式引用波克1号和 Plnkr2。

站点 Dartdocs提供了关于 Angular 2 DynamicComponent 的很好的文档，同样适用于 TypeScript。

简而言之:

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

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

保存所有要添加的组件的组件的构造器(我的应用程序需要包含多个子组件:

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

以及将放置在某处的 helper 函数

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


return FakeComponent;
}

小开

由于安全问题，这种创建动态模板的方式似乎不适用于角度2。不幸的是，我以前的应用程序是以这种方式动态驱动的。

对于角2-这可能是一个不同的方式做同样的(链接示例如下)。通过将模板 html 文件更新为应用程序中的组件，然后将它们注入(您试图用字符串等创建 templateUrl 的位置)视图组件模板参数作为元素(使用 DynamicComponent 加载器)。

Https://angular.io/docs/js/latest/api/core/dynamiccomponentloader-class.html

小开

我的解决办法是:

角度2.0视图解析器类

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

小开

虽然不是你想要的，但值得一提的是:

另一个简单的解决方案，适用于大多数用例，就是把逻辑放在模板本身中，像这样:

@Component({
selector: 'my-component'
})
@View({
// Note1: Here, I use template instead of templateUrl.
// Note2: I use ES6 string interpolation + require() to embed/load the other templates, but you can do it however you like.
template: `
<div [ngSwitch]="loggedIn">
<template [ngSwitchCase]="true"> ${require('./logged-in.html')} </template>
<template ngSwitchDefault> ${require('./logged-out.html')} </template>
</div>`
})
class MyComponent {
constructor() {
this.loggedIn = false;
}
}

这种解决方案的缺点是，您所服务的 js 文件最终会包含这两个模板，所以这对于大模板来说可能是个问题(但是实际上只呈现了一个模板，在许多情况下 js 大小开销是可以接受的)。

小开

我的解决方案: (这样做的好处是可以延迟加载 html 和 css 文件。)

这是家，组件

import { Component } from '@angular/core';
import { DynamicHTMLOutlet } from './../../directives/dynamic-html-outlet/dynamicHtmlOutlet.directive';
import { TranslateService, LangChangeEvent } from 'ng2-translate/ng2-translate';


@Component({
selector: 'lib-home',
templateUrl: './app/content/home/home.component.html',
directives: [DynamicHTMLOutlet]
})
export class HomeComponent {
html_template = `./app/content/home/home_`;
html: string;
css: string;
constructor(translate: TranslateService) {
this.html = this.html_template + translate.currentLang;
this.css = './app/content/home/home.component.css';
translate.onLangChange.subscribe((event: LangChangeEvent) => {
this.html = this.html_template + translate.currentLang;
this.css = './app/content/home/home.component.css';
});
}


}

我使用的指令做了一些修改: 这是在 home. compenet.html 中

<dynamic-html-outlet [htmlPath]="html" [cssPath]="css"></dynamic-html-outlet>

这是动态组件的指令:

import {
Component,
Directive,
ComponentFactory,
ComponentMetadata,
ComponentResolver,
Input,
ReflectiveInjector,
ViewContainerRef,


} from '@angular/core';
import { TranslatePipe } from 'ng2-translate/ng2-translate';
declare var $:any;


export function createComponentFactory(resolver: ComponentResolver, metadata: ComponentMetadata): Promise<ComponentFactory<any>> {
const cmpClass = class DynamicComponent {};
const decoratedCmp = Component(metadata)(cmpClass);
return resolver.resolveComponent(decoratedCmp);
}


@Directive({
selector: 'dynamic-html-outlet',
})
export class DynamicHTMLOutlet {
@Input() htmlPath: string;
@Input() cssPath: string;


constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
}


ngOnChanges() {
if (!this.htmlPath) return;
$('dynamic-html') && $('dynamic-html').remove();
const metadata = new ComponentMetadata({
selector: 'dynamic-html',
templateUrl: this.htmlPath +'.html',
styleUrls:  [this.cssPath],
pipes: [TranslatePipe]
});
createComponentFactory(this.resolver, metadata)
.then(factory => {
const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
this.vcRef.createComponent(factory, 0, injector, []);
});
}
}

小开

更新到@Eyal Vardi 的回答(ViewResolver不推荐) :

import { Directive, Type, Component } from '@angular/core';
import { DirectiveResolver } from '@angular/compiler';


class myViewUrlResolver extends DirectiveResolver {
resolve(type: Type<any>, throwIfNotFound?: boolean): Directive {
let view = <any>super.resolve(type, throwIfNotFound);
if (typeof view["templateUrl"] !== "undefined") {
console.log("Yay!");
let originalUrl = (<Component>view).templateUrl;
(<Component> view).templateUrl = environment.nativeScriptAppPrePathPrefix + originalUrl.replace(".html", ".tns.html");
}
if (typeof view["styleUrls"] !== "undefined") {
console.log("Yay2!");
let originalUrls = (<Component>view).styleUrls;
originalUrls.forEach((originalUrl, at) => (<Component>view).styleUrls[at] = environment.nativeScriptAppPrePathPrefix + originalUrl.replace(".html", ".tns.css"));
}
return view;
}
}


platformNativeScriptDynamic().bootstrapModule(AppModule,{
providers: [
{ provide: DirectiveResolver, useClass: myViewUrlResolver }
]
});

小开

霍普，给你举个 github 的例子会帮助你的！有编译动态 html 的例子。因此，您可以通过任何服务加载 HTML，然后编译它。

小开

1-安装此库

Npm i-D html-loader

============================================================

2-在 webpack.config 中为 html 文件使用 html-loader

 { test: /\.html$/,  loaders: ['html-loader']   }

============================================================

3-如果使用 ionic，可以从路径中复制 webpack.config.js “ node _ module/@ionic/app-script/config/webpack.config.js” 然后将 html 加载程序添加到其中

=============================================================

如果你使用离子在 package.json 中添加这些行

"config": {
"ionic_bundler": "webpack",
"ionic_webpack": "webpack.config.ionic.js"
},

=============================================================

然后你可以像下面这样使用它

@Component({
selector: 'page-login',
// templateUrl:"./login.html"


template:     function(){
if(globalVariables.test==2) {


return require("./login2.html")
}
else
{
return require("./login.html")
}
}(),
})

======================================

6-如果需求函数有未解决的错误，你可以把它放在 Declaration. d.ts 文件中，如下所示:

声明变量要求: 任何;

小开

用 aot“ ng service —— aot”编译您的应用程序。

export let DEFAULT_PREFIX :string= './app.component';
//or localStorage.getItem('theme')
export function getMySuperTemplate(template: string) {
return DEFAULT_PREFIX + template + '.html';
}


@Component({
selector: 'app-root',
templateUrl: getMySuperTemplate('2'),
styleUrls:['./app.component.css']
})

小开

我知道这在技术上并不能回答所问的问题，但是，在许多情况下，您可以通过创建一个新组件来扩展预期的组件并使用不同的 templateUrl来达到预期的效果。然后，在父组件中使用 *ngIf加载正确的模板。

组件使用模板1:

@Component({
selector: 'template-one-component',
templateUrl: './template-one.html'
})
export class TemplateOneComponent {
title = 'This component uses one template';
}

组件使用模板2:

@Component({
selector: 'template-two-component',
templateUrl: './template-two.html'
})
export class TemplateTwoComponent extends TemplateOneComponent {
}

家长组成部分:

@Component({
selector: 'parent-component',
template: `
<template-one-component *ngIf="useTemplateOne; else useTemplateTwo"></template-one-component>


<ng-template #useTemplateTwo>
<template-two-component></template-two-component>
<ng-template>
`
})
export class ParentComponent {
useTemplateOne: boolean;
}