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

如何解决Angular 2 的templateUrl和styleUrl的路径问题?的更多相关文章

  1. 【js类库AngularJs】解决angular+springmvc的post提交问题

    [js类库AngularJs]解决angular+springmvc的post提交问题 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前 ...

  2. Angular 使用 frame 加载网络资源显示路径不安全问题

    Angular 使用 frame 加载网络资源显示路径不安全问题 做项目的时候,angular 使用 frame 加载网络pdf文件的时候出现 unsafe value 问题,路径不安全.解决办法. ...

  3. 如何解决因为找不到Notepad++的安装路径而导致的不能更新CS-Script的问题

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何解决因为找不到Notepad++的安装路径而导致的不能更新CS-Script的问题.

  4. 如何解决Angular网页内嵌推特时间线无法正常显示

    我最近解决了一个折磨了我好久但是解决方法却只是添加两三行代码的问题.我没有在网上找到合适的解决方案,最后是我根据官方网站和很多的帖子里的部分代码得到的启发,尝试了很久之后得到的解决方法.因为过程实在是 ...

  5. 解决angular ui-grid 中添加input date修改日期

    需求:在angular ui-grid列表中添加一个日期组件来修改时间. 在angular ui-grid添加了一个html5 date input,后端返回的数据是YYYY-MM-DD,比如:201 ...

  6. 解决angular单页面页面底部跳转到新页面滚动条不在顶部的问题

    以上jquery,下面js this.router.events.subscribe((event) => { document.body.scrollTop=0; }); 另一种写法 impo ...

  7. 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

    这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBod ...

  8. 解决angular 与django的冲突

    {% block main %} <script type="text/javascript" src="http://cdnjs.cloudflare.com/a ...

  9. 如何解决angular不自动生成spec.ts文件

    "schematics":{   "@schematics/angular:component": {        "styleext": ...

随机推荐

  1. PAT乙级 1003. 我要通过!(20)

    答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于PAT的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: 1. ...

  2. [python] No module named _sysconfigdata_nd

    when setting python environment in Ubuntu13.04, i got this error: ImportError: No module named _sysc ...

  3. JSP-04- 实现数据的保存

    .1  Session 一段时间内,单个客户与Web服务器的一连串相关的交换过程. Ø  4.1.1  应用的场景: 用户登录后保存用户状态 确定用户的唯一   Sessin.getId(); Ø  ...

  4. 清除Cookie、获取指定Cookie的值、添加一个Cookie(24小时过期)、添加一个Cookie

    MXS&Vincene  ─╄OvЁ  &0000007 ─╄OvЁ  MXS&Vincene MXS&Vincene  ─╄OvЁ:今天很残酷,明天更残酷,后天很美好 ...

  5. 图像处理控件ImageGear for .NET教程如何为应用程序 添加DICOM功能(2)

    在前面的一些关于图像处理控件ImageGear for .NET文章<图像处理控件ImageGear for .NET教程: 添加DICOM功能(1)>中讲解了如何对应用程序添加DICOM ...

  6. JS和CSS的多浏览器兼容(2)

    2.Css的浏览器兼容性 方法一,根据不同的浏览器加载不同的css file <!DOCTYPE html>  <html> <head> <title> ...

  7. SQL Server系统表sysobjects介绍与使用

    关于SQL Server数据库的一切信息都保存在它的系统表格里.我怀疑你是否花过比较多的时间来检查系统表格,因为你总是忙于用户表格.但是,你可能需要偶尔做一点不同寻常的事,例如数据库所有的触发器.你可 ...

  8. .Net额外小工具

    http://blog.csdn.net/zhumi/article/details/49076 用于编写单元测试的 NUnit用于创建代码文档资料的 NDoc用于生成解决方案的 NAnt用于生成代码 ...

  9. ACM题目————Team Queue

    Queues and Priority Queues are data structures which are known to most computer scientists. The Team ...

  10. 一个通用的DAO模型实现增删改查

    首先三个架包: mysql-connector-java-jar commons-dbcp-1.4jar commons-pool-1.5.5jar 导进去: (从上往下一次调用,实现功能) ---- ...