参考地址: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;
}
}