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

Posted 2020-06-13

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