标签：
参考地址：https://github.com/kittencup/angular2-ama-cn/issues/18
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也是能解决这个路径问题,但是不够灵活，如果我想templateUrl从http://cdn.template.kittencup.com加载，而styleUrl到http://cdn.style.kittencup.com加载，那么单单用一个PACKAGE_ROOT_URL是无法解决的
在Angular 2源码中无论templateUrl和styleUrl在加载前都会通过UrlResolver对象来进行处理，UrlResolver对象是通过依赖注入获取的，源码在 src/compiler/url_resolver.ts ，默认的UrlResolver是根据PACKAGE_ROOT_URL的值来替换package:或者asset: 占位符，所以我们可以重设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;
}
}
如何解决Angular 2 的templateUrl和styleUrl的路径问题？
标签：
原文地址：http://www.cnblogs.com/GarsonZhang/p/5179601.html
