Angular 2のtemplateUrlとstyleUrlのパスの問題をどのように解決しますか?
前言:
templateUrlは、コンポーネントがブラウザで実行されるときに依存するテンプレートアドレスを示すため、templateUrlでは./xxx.htmlというパスを記入することはできません.ブラウザのパスから考慮してください.src
index.html
index.js //
components
button
button.ts
button.html
index.html ， button.htmlを くパスは ですか/components/button/button.htmlだからあなたのbutton.tsの のtemplateUrlに して/components/button/button.html
，templateUrlと くべきパスはあなたが したhtmlファイルのパスに づいて するべきです
に
componentフォルダ のコンポーネントのtemplateUrlに/componentsを く がある は ではありませんが、もちろんここではパスが くて ですが、パスが い は/a/b/c/d/e/f/componentsでは、 コンポーネント にそんなに いアドレスを くのではないでしょうか.また、 に してもファイルごとに する があります.
ソリューション
Angular 2は、package:またはasset:プレースホルダを することができます.この2つのプレースホルダのデフォルトに する は/packagesです.templateUrl:'package:/button/button.html'を すると、 にこのアドレスが/packages/button/button.htmlに き えられます.ここでは、Tokenをリセットすることで、PACKAGE_ROOT_URLのprovideに する があります.
import {provide,PACKAGE_ROOT_URL} from 'angular2/core';
bootstrap(App,[provide(PACKAGE_ROOT_URL,{useValue: '/components'})])
/components/button/button.html
package:またはasset:プレースホルダは にロードされたパスを することができ、プロジェクトが な にリリースされた 、 たちの ファイルはCDN にあるはずだ.もちろんPACKAGE_ROOT_URLを じてもこのパスの を することができるが、 が りない.では、1つのtemplateUrlだけでは できません.
ソリューション
Angular 2のソースコードでは、http://cdn.template.kittencup.comおよびstyleUrlがロードされる にhttp://cdn.style.kittencup.comオブジェクトによって され、PACKAGE_ROOT_URLオブジェクトは に して され、ソースコードはsrc/compiler/url_resolver.ts、デフォルトのtemplateUrlはstyleUrlの に づいてUrlResolverまたはUrlResolverプレースホルダを き えるので、UrlResolverをリセットすることができ、コードは の りである.
、
@Component({
selector: "hz-stepbody",
templateUrl: "dm_template.html"// ， /dm_template.html
})
class Stepbody { }
import {UrlResolver} from 'angular2/compiler';
class MyUrlResolver extends UrlResolver {
resolve(baseUrl: string, url: string): string {
if (url.substr(-4) === '.css') {
return super.resolve('http://cdn.style.kittencup.com', url);
}else if(url.substr(-5) === '.html'){
return super.resolve('http://cdn.template.kittencup.com', url);
}
return super.resolve(baseUrl, url);
}
}
bootstrap(App, [provide(UrlResolver, {useClass: MyUrlResolver})]);
、@Component({
selector: "hz-stepbody",
templateUrl: "mytemplate:dm_template.html"
})
class Stepbody { }
import {provide, PACKAGE_ROOT_URL} from 'angular2/core';
import {UrlResolver} from 'angular2/compiler';
class MyUrlResolver extends UrlResolver {
resolve(baseUrl: string, url: string): string {
var resolvedUrl = url;
if (url.substr(0, 6) == "mytemplate") {
resolvedUrl = resolvedUrl.replace("mytemplate:", "/template/gz/");
}else {
resolvedUrl = super.resolve(baseUrl, url);
}
return resolvedUrl;
}
}
PACKAGE_ROOT_URL package: