首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在使用AOT的angular库配置中使用window.location.origin

在使用AOT(Ahead of Time)编译的Angular库配置中使用window.location.origin,可以获取当前页面的完整URL的协议、主机和端口部分。

具体来说,window.location是一个包含当前页面URL信息的对象,其中的origin属性返回当前页面的协议、主机和端口部分。这在前端开发中经常用于构建动态的URL地址或者进行跨域请求。

在Angular中,使用AOT编译后的配置文件是一个静态的JavaScript文件,无法直接访问浏览器的全局对象。因此,如果需要在AOT编译的Angular应用中获取当前页面的完整URL的协议、主机和端口部分,可以通过以下步骤实现:

  1. 在Angular项目中创建一个名为window.service.ts的服务文件,用于封装对window.location.origin的访问。
  2. window.service.ts文件中,定义一个WindowService类,并在该类中创建一个方法,例如getOrigin(),用于返回window.location.origin的值。
  3. getOrigin()方法中,使用window.location.origin获取当前页面的完整URL的协议、主机和端口部分,并将其返回。
  4. 在需要使用window.location.origin的组件或服务中,通过依赖注入的方式引入WindowService,并调用getOrigin()方法获取当前页面的完整URL的协议、主机和端口部分。

以下是一个示例的window.service.ts文件的代码:

代码语言:txt
复制
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class WindowService {
  getOrigin(): string {
    return window.location.origin;
  }
}

在使用window.location.origin的组件或服务中,可以通过以下方式引入WindowService并获取当前页面的完整URL的协议、主机和端口部分:

代码语言:txt
复制
import { Component } from '@angular/core';
import { WindowService } from './window.service';

@Component({
  selector: 'app-example',
  template: `
    <p>当前页面的完整URL的协议、主机和端口部分为:{{ origin }}</p>
  `
})
export class ExampleComponent {
  origin: string;

  constructor(private windowService: WindowService) {
    this.origin = this.windowService.getOrigin();
  }
}

这样,就可以在使用AOT编译的Angular应用中获取当前页面的完整URL的协议、主机和端口部分了。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,建议在腾讯云官方网站或者腾讯云文档中搜索相关产品,以获取最新的产品信息和链接地址。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

python配置opencv使用pycharm环境

3 .配置openCV环境变量 第一步,依次选择“计算机”,右键选择“属性”,"高级系统设置"->“环境变量”。找到环境变量下“系统变量” ->"path"值,然后选择“编辑”如图示: ?...弹出窗口中,“变量值”后面添加“;”和刚才目录,也就是添加这个字符串";F:\chengxin\openCV2.4.9\opencv\build\x64\vc11\bin"。如图示: ?...openCV安装和配置就到这里结束了。 配置pythonopenCV引用。 安装好了python和openCV,怎么让他们关联起来呢?...如果你是32位系统,那么你应该是“x86”下面。如图示: ?...通过cmd控制台,我们可以尝试一下运行openCV自带一些python写example。这些example“opencv\sources\samples\python”下面可以看到。

6K20
  • Angular SASS 样式使用

    这是我参与「掘金日新计划 · 4 月更文挑战」第18天。 Angular 自定义指令 Tooltip 文章,我们说会出一篇关于 sass 样式文章,现在它来了。....scss 为后缀,语法用 {} 修饰 .sass 为后缀,语法是缩紧方式 推荐使用 .scss 项目集成 angular 项目使用脚手架生成,添加样式这一个步骤,会询问你编写样式方式,让你选择... angular 编写样式,可以分为组件样式和全局样式。...全局样式 angular 脚手架生成项目,默认 src/style.scss 文件存放全局样式。在这个文件修改样式,将对整个应用样式产生影响。...使用 mixin 混合器 在编写样式时候,我们会出现在多个类调用同一份样式内容。

    5K20

    Angular Elements 组件angular 页面中使用DEMO

    如果页面引入该Js文件 ,就相当于页面中新增了一个标签,所以在任意框架中都可以使用新标签,就像它是原生div一样。        ...二、Angular Elements 使用实战      前不久看到项目angular-elements-dashboard :支持动态加载模块和动态加载外部模块。...于是我就尝试一下,看这个构建angular elements 文件到底如果引入一个空白页面,引入后组件浏览器又是如何呈现。      页面结构:      ?...按照以前看文章说明,Native模式其实用是Shadow Dom v0,并不是最新技术,2018.7.25号6.1.0升级,它又引入了新封装方式ViewEncapsulation.Shadow...现在angularcommit,有一半都是关于ivy提交,只需要大家静等angular 7.0到来了!

    2.7K20

    Angularui-select使用

    Angularui-select使用 最近工作一直很忙,没有时间整理知识,前几天项目中需要用到angular-ui-select,实现下拉框快速过滤效果,今天有时间研究了一下,终于搞明白了。...所依赖AngularAngular-sanitize最低版本,只有依赖版本符合要求,才能实现功能,否则会报错。...如果项目中用到Angular版本比较低时,请安装低版本Angular-sanitize和Angular-ui-select,这样,避免低版本不支持情况。...2.安装方法: 使用npm进行安装 npm install Angular-sanitize@1.2.28 --save -dev @+版本号表示安装指定版本包文件,如果不加版本号,默认安装最新版本...二、使用方法 1.首先依次引入所需要文件 ?

    3K60

    Angularsweetalert弹框使用详解

    ,但是只能用sweetalertcss,js必须通过npm下载sweetalert,引入下载sweetalert.min.js 二、版本说明 Angular V1.2.30 Angular-sweetalert...V1.0.4 Sweetalert V2.1.0 因为我们项目使用angular版本较低,所以相对应下载angular-sweetalert版本也低。.../sweetalert.min.js 注意:app添加依赖模块‘oitozero.ngSweetAlert’ 四、使用方法 1、基础用法 swal("请选中数据再进行操作"); ?...五、相关问题 1、传函数错误 Swal(“确定提交吗”,  function(){}, ‘error’ );  //这种写法我用这个版本是错误,我这个版本支持then(), 不支持直接在参数写方法..., "你虚拟文件已经被删除。", "success"); 12 }); 在这个版本只能按照我最上面所列举去实现,那是我官方英文文档中发现,中文文档太坑了。

    2.8K40

    CSReidNetCore工作场景使用

    ## 关于我 [作者博客|文章首发](http://www.zhouhuibo.club) 过去 .net 最有名望 ServiceStack.Redis 早已沦为商业用途, .NETCore...经过网上一些整理和推荐,发现了一款开源CSReidsCore。...CSRedisCore是国人开源一套Redis操作,现在最新版本已经V3.6.5,经过几个实际公司项目的使用情况来看,还没有出现什么大问题,本文主要介绍一下使用这个过程一些自己想法。...: 将实例后各个RedisDb整合在数组,单例截注入services ``` var connectionString = "127.0.0.1:6379,password=123,poolsize...,可以参照”Redis多个Db使用“标签进行设置** ## 高级用法 CSRedis高级用法可以参考这篇文章 [.NETCore 简单且高级 csredis v3.0.0](https://www.cnblogs.com

    2K40

    SciPyAnaconda配置

    本文介绍Anaconda环境,安装Python语言SciPy模块方法。...它建立NumPy基础之上,并额外提供其他更高级功能与工具,涵盖了许多科学分析领域——包括数值积分、优化、插值、信号和图像处理、线性代数、统计分析等。其中,SciPy常用一些功能如下所示。...这篇文章,就介绍一下Anaconda环境下,配置SciPy这一方法。   首先,打开Anaconda Prompt软件,如下图所示。   ...在这里,由于我是希望一个名称为py38Python虚拟环境配置SciPy,因此首先通过如下代码进入这一环境;关于虚拟环境创建与进入,大家可以参考文章Anaconda创建、使用、删除Python...再稍等片刻,出现如下图所示情况,即说明SciPy已经配置完毕。   此时,我们可以通过如下图所示代码,检查是否成功完成SciPy配置工作。

    20510

    【Linux】详解动静态制作和使用&&动静态系统配置步骤

    但是,ubuntu系统下你会发现,动态使用静态链接方法我们动态系统还是找不到(此处特制ubuntu系统,其它系统可能可以正常运行),这时我们就只能将我们动态拷贝到系统usr/lib目录下...此时在运行我们程序就能正常运行了,但要注意是,指令最后我们必须指明我们要链接,因为这个是我们自己导到系统,需要我们自己指明链接。...export是导入到系统内存级别的环境变量,下次登录系统又会从磁盘配置文件重新读取环境变量,所以如果要让你配置这个LD_LIBRARY_PATH环境变量永久生效需要将其配置到.bashprofile...方法3:修改加载动态配置文件 系统这个目录/etc/ld.so.conf.d/下(ld:load加载,so动态,conf配置文件,d目录),建立.conf后缀配置文件,文件里面只需要存放动态路径即可...,系统寻找动态时候默认就会帮我们搜索该目录下配置文件中所保存路径。

    47510

    openstck配置使用cloud-init

    cloud-init是创建虚拟机时能够对虚拟机进行一些初始化操作工程。...虚拟机启动时候,对虚拟机进行一些列操作,例如常用:自动设置 虚拟机hostanme,设置虚拟机用户初始密码,自动安装软件等。...OpenStack也支持配置cloud-init,本文介绍如何在openstack中使用cloud-init以及部分源码分析。...nova创建虚拟机时候,根据用户配置使用产生一个元数据盘,其中包括虚拟机基本配置,包括常见主机名、用户、密码、ip地址等,另外还可以添加用户自定义数据。这个元数据盘会挂在给虚拟机。...虚拟机启动时挂载此盘,供虚拟机内部cloud-init软件使用,从而达到自动初始化虚拟机配置功能。

    2.4K110

    使用angular2使用nodejs创建服务器,并成功获取参数

    首先创建服务器: 1.最好使用express,这个有更多api,方法:npm install express --save; 2. npm install @types/express --save...app.get("/api/products",(req,res)=>{ res.json(products) }) app.get("/api/products/:id",(req,res)=>{ //命令行打印....对应 需要引入Observable from "rxjs" http服务已经app.module引入过了,这里需要声明构造函数里头,并引入Http from "@angular/Http";...接着就是坑了,写完后,发现还是获取不到服务器上数据: 接下来还有配置: 根目录新建一个文件:proxy.conf.json  内容为: { "/api":{ "target":"http...://localhost:8000" } } 然后package.json文件,修改一行 "start": "ng serve --proxy-config proxy.confi.json",

    4.3K70

    Visual Sutdio 2017使用boost

    对C++有一定了解同学一定听说过boost,这是C++一个著名类C++地位感觉可以和SpringJava相比。...VS设置 VS中新建一个C++项目,然后打开项目属性页,然后切换到VC++目录,包含目录和目录中分别添加BOOST_ROOT和BOOST_ROOT\libs两个文件夹。 ? ? ?...配置完成后,就可以项目中使用boost了。当然对于Visual Studio来说,还有更简单办法,那就是使用NuGet。...使用NuGet添加 配置完之后,我还发现微软NuGet竟然也可以添加boost。方法很简单,项目菜单中点击管理NuGet包,然后搜索boost,然后点击右边下载按钮即可。 ?...由于boost是一个比较大,所以这个安装过程可能需要多花费几分钟。安装完成后boost类会放到项目文件夹package文件夹。NuGet会自动帮我们配置好包含路径等设置。

    3.4K100

    Julia in Jupyter——Notebook配置使用Julia语言

    有时我习惯不严谨地混用以上几个词,其实都是指目前最新版本Jupyter Notebook,希望不会误导大家。 OK,下面来安装Julia并在Notebook配置使用IJulia吧!...Step1:下载安装Julia https://julialang.org/downloads/ 选择合适版本Julia下载并安装即可。 我自己是64位Windows 10进行安装配置。 ?...安装IJulia时,如果你没有事先配置好jupyter路径,那么它会自动下载安装一个jupyter。因为我之前是配好Notebook,只是希望将Julia添加进去。...Julia命令行执行; ENV["JUPYTER"]="~/jupyter.exe" 比如我就是 ?...注意Windows使用\\或/ 如果不清楚已安装jupyter路径,cmd中使用where jupyter命令查询。

    6.5K61

    SpringBoot如何使用国际化配置

    阅读springboot官方文档spring-boot-reference.pdf过程,发现springboot国际化支持也是非常不错。...2.国际化资源配置 要实现上述文字部分国际化,首先需要定一需要国际化资源,也就是哪些位置我们需要做国际化。上述网页,我们可以将form内文字内容全部国际化。...3.html 现在需要将上述定义国际化资源配置到html模板,此使需要用到thymeleaf模板引擎。...chrome设置-> 高级-> 语言 中进行配置。 只需要将任何一种语言移动到顶部即可。 我们将语言首选项设置为英语之后: ?...可见,通过springboot来实现国际化配置还是非常方便。但是目前前后端大多数采用分离架构,因此这个功能也不再像当年struts时代会有非常多的人来使用

    85120
    领券