如何解决Angular 2 的templateUrl和styleUrl的路径问题?

时间:2022-11-05 22:04:39

参考地址: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,在这里我们需要修改一下默认的占位符地址,通过重设TokenPACKAGE_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也是能解决这个路径问题,但是不够灵活,如果我想templateUrlhttp://cdn.template.kittencup.com加载,而styleUrlhttp://cdn.style.kittencup.com加载,那么单单用一个PACKAGE_ROOT_URL是无法解决的

解决方案

在Angular 2源码中无论templateUrlstyleUrl在加载前都会通过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;
}
}