Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 639|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    8 小时前
  • 签到天数: 774 天

    [LV.10]以坛为家III

    2045

    主题

    2103

    帖子

    71万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    713936
    发表于 2021-7-6 12:39: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;
        }
    }
    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-8-13 23:43 , Processed in 0.131264 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表