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

Angular 7-如何路由到新的窗口位置或文件

Angular 7是一种流行的前端开发框架,用于构建单页应用程序。在Angular 7中,可以使用路由来导航到不同的组件或视图。然而,Angular默认的路由机制是在同一个窗口或视图中进行导航。如果需要在新的窗口位置或文件中导航,可以通过以下几种方法实现:

  1. 使用HTML的<a>标签的target属性:可以在<a>标签中设置target="_blank"来在新的窗口中打开链接。例如:
代码语言:txt
复制
<a href="https://example.com" target="_blank">打开新窗口</a>

这样点击链接时,会在新的窗口中打开指定的URL。

  1. 使用JavaScript的window.open()方法:可以使用window.open()方法来打开一个新的窗口,并指定URL。例如:
代码语言:txt
复制
window.open('https://example.com', '_blank');

这样会在新的窗口中打开指定的URL。

  1. 使用Angular的Router服务和window.open()方法的结合:可以在组件中使用Router服务来导航到一个特定的路由,然后在该路由的组件中使用window.open()方法来打开新的窗口。例如:
代码语言:txt
复制
import { Router } from '@angular/router';

constructor(private router: Router) {}

openNewWindow() {
  this.router.navigate(['/new-route']); // 导航到指定的路由
}

// 在新的路由组件中的方法中打开新窗口
openWindow() {
  window.open('https://example.com', '_blank');
}

这样可以通过点击按钮或执行某个操作来导航到新的路由,并在该路由的组件中打开新的窗口。

需要注意的是,以上方法只是实现在新的窗口位置或文件中导航的一些常见方式,具体的实现方式还取决于具体的需求和场景。在实际开发中,可以根据具体情况选择合适的方法来实现。

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

相关·内容

内核版EasyNVR如何更改录像文件存储位置

TSINGSEE青犀视频在去年对旗下视频平台EasyGBS、EasyNVR、EasyCVR等,均更换为了流媒体内核,内核版视频平台性能更加稳定、流畅、灵活。...内核版EasyNVR平台有默认录像存储位置(EasyNVR/mediaserver/data/hls),同时我们平台也支持用户根据需求,将录像文件存储在其他指定磁盘。...近期就有用户咨询我们如何内核版本EasyNVR录像文件存储其他空闲磁盘内,今天我们就来详细地介绍一下操作步骤。...1)首先,在需要存储录像文件磁盘内创建一个record目录,如下图所示: 2)创建完成后,我们打开EasyNVR目录下mediaserver-tsingsee.ini配置文件,在里面找到hls这一行...,将out_path参数修改为磁盘下方创建目录,如下图所示(绝对路径): 3)重启EasyNVR服务,如图,录像文件已生成。

1.9K20

如何自动备份交换机和路由配置文件服务器

在多年IT外包服务生涯中,见过很多网络设备意外丢失配置文件状况,甚至亲身经历过某个客户H3C防火墙,不但丢失配置文件,就连系统文件都直接消失了,哪怕上传系统文件,重新配置,只要一重启,所有的都会消失...所以,在日常网络管理中,自动备份关键配置文件至服务器,不仅能够提高恢复效率,还可以防止因意外丢失而导致重大损失。本文将以H3C交换机为例,详细介绍如何将网络设备配置自动保存到服务器上。...服务器(此处以Windows Server为例):部署FTP、SFTPTFTP服务器,用于存储备份文件。 网络连接:确保H3C交换机与服务器之间网络通畅,无阻碍。...步骤概述如下: 1、服务器配置: 以TFTP服务器为例,下图一看便知,设置目前,确认IP地址就行: 2、配置H3C交换机 通过telnet或者SSH又或者console端口登录到H3C交换机路由器,然后执行以下两个命令...自动备份不执行 检查设备系统时间设置是否准确,定时任务配置是否正确。 总结 自动备份网络设备配置服务器,是提高网络稳定性和安全性有效策略。

11110

AngularDart4.0 英雄之旅-教程-07路由

为了满足这些要求,您将添加Angular路由应用程序。 有关路由更多信息,请阅读路由和导航页面。  当你完成这个页面,应用程序应该看起来像这个实例(查看源代码)。...将当前AppComponent中英雄相关重新定位单独HeroesComponent。 添加路由。 创建一个DashboardComponent。 将Dashboard绑定导航结构中。...RouterLink指令告诉路由在用户点击链接时位置。 您使用链接参数列表定义了一个路由指令, 这个列表在我们小样本中只有一个元素,引用路由名称。...路由是不寻常,你必须告诉HeroDetailComponent显示哪个英雄。 您不必告诉HeroesComponentDashboardComponent任何东西。...你走过路 以下是您在此页面中所取得成果: 您添加了Angular路由器来浏览不同组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航用户选择英雄细节。

17.5K30

【17】进大厂必须掌握面试题-50个Angular面试

更快 支持 不再提供支持更新 积极支持和频繁更新 2.什么是Angular?...scope是 scopeProvider提供服务,可以注入控制器,指令其他服务中,而Scope可以是任何东西,例如函数参数名称等。 21.解释范围层次概念吗?...这些容器保存着专门用于应用程序域,工作流一组紧密相关功能内聚代码块。这些模块通常包含组件,服务提供商和其他代码文件,其范围由包含NgModule定义。...35.什么是Angular包含? Angular包含可让您将指令原始子代转移到模板内特定位置。ng指令指示正在使用包含最近父指令已包含DOM插入点。...您对Angular常数有什么了解? 在Angular中,常量类似于用于定义全局数据服务。常量使用关键字“ constant”声明。它们是使用恒定依赖性创建,可以注入控制器服务中任何位置

41.2K51

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

在成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象树,同时包含路由器的当前状态。在重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许状态。...保护运行后,它将解析路由数据并通过将所需组件实例化 中来激活路由器状态。...如何实现不出现编辑器警告自定义类型? 在大多数情况下,第三方库都带有它.d.ts 文件,用于类型定义。...如果我们需要扩展外部库类型定义,一个好做法是,我们并非对node_modules现有的typings文件夹进行改动,而是创建一个命名为“自定义类型”文件夹,来存储所有的自定义类型。...对于这些情况,我们可以通过创建我们自己“ .d.ts”文件来实现定义扩展类型。

17.3K80

Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

这一章主要介绍如何在创建好后台管理页面框架快速生成NG-ZORRO相关组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...运行应用程序端 (E2E) 测试 构建应用程序 使用命令添加功能到现有的 Angular 应用程序: 可以使用 ng generate 命令,为已有的 Angular 应用程序添加功能: ng...修改项目默认调转页面,Angular应用多模块路由配置: 找到app-routing.module.ts文件,在【routes】对象中声明模块路由,以及项目默认调转页面地址修改。 ?...2、配置首页组件路由(多模块路由完美解决): 首先,我们博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件中配置多个模块路由...自定义页面Layout布局(动态菜单栏配置): 一般情况下我们页面动态菜单都是从后台读取,然后遍历绑定在【app.component.html】页面中,我们这里没有展示没有涉及后台就是用固定式路由

3.9K20

干货 | 关于前端构建大型知识应用,你知道多少?

关于 Angular 各个版本对比,大家可以参考下《谈谈Angular–从Angular1Angular4》 以及《重新认识Angular》。...项目中使用 Angular,最大体验感受则是项目有完备结构和规范,加入成员能很快地通过复制粘贴完成功能开发。...同时对我们项目结构规划也有很大帮助,我们可以根据路由来放置我们代码文件,有了这样约定,我们在维护他人代码时候,便能迅速地定位对应位置。...我们可以把首屏相关东西打包 bundle,其他模块分块打包 chunk,来在需要时候再进行加载。 路由异步加载 通常情况下,我们会结合路由进行分块打包,路由管理工具大部分都支持异步加载。...chunk 当中 这个 chunk 会被 webpack 通过 jsonp 来按需加载 Source map 这里需要讲一下,Source map 就是一个信息文件,里面储存着位置信息。

1K10

Angular 从入坑挖坑 - Angular 使用入门

一、Overview angular 入坑记录笔记第一篇,完成开发环境搭建,以及如何通过 angular cli 来创建第一个 angular 应用。...Angular 从入坑弃坑 - Angular 使用入门 三、Knowledge Graph ?...4.1.2、运行第一个 Angular 应用 通过 Angular CLI 命令来创建一个应用 ## 指定位置,创建 angular 应用 ng new my-app 常用命令参数 options...e2e - 端端测试文件 src - 单元测试源代码路径 app.e2e-spec.ts - 针对当前应用端单元测试文件 app.po.ts - 单元测试源文件 protractor.conf.js...app - 系统所提供各种功能 app-routing.module.ts - 项目的路由模块,用来定义项目的前端路由信息 app.component.html - 项目的根组件所关联 HTML

1.9K20

无需框架,就能实现微前端,理解起来通俗易懂

他们基本上把前端应用分成独立和半独立微应用,这样每个应用都可以采用不同技术,比如React、AngularVue,这样就可以很容易地集成单个应用中。...我们可以开发包含认证和路由实现主父应用程序,然后我们可以继续添加多个独立工作子应用程序,可以在相同不同页面加载。...如何构建微前端 现在让我们来看看如何构建一个真正应用,以及如何使用微前端集成两个框架,React和Angular。这里出现第一个问题是,我们应该如何划分应用,因为没有特定标准来划分它们。...因为我们在两个子应用程序中都使用单个SPA函数,所以子应用程序和模板都将知道使用全局名称空间single SPA生命周期函数位置。 问题是如何设置这些子应用位置?...要设置子应用程序位置,只需在Webpack配置文件中为每个子应用程序module.exports.output对象添加两个条目。

2K20

Angular系列教程-第五节

1.模块 NgModule 是一个带有 @NgModule 装饰器类。 @NgModule 参数是一个元数据对象,用于描述如何编译组件模板,以及如何在运行时创建注入器。...@NgModule 获取一个元数据对象,它会告诉 Angular 如何编译和启动本应用。 declarations —— 该应用所拥有的组件。...依赖注入 在 Angular 中,要把一个类定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入组件中。...3.路由 在用户使用应用程序时,Angular 路由器能让用户从一个视图导航另一个视图。... 3.1路由配置 3.2路由占位符 3.3路由点击状态 3.4路由参数 4.配置说明 项目文件说明 .editorconfig 代码编辑器配置 .gitignore

2.9K20

AngularDart 4.0 高级-路由概述 顶

点击页面上链接,浏览器导航新页面。 点击浏览器后退和前进按钮,浏览器会前后浏览您浏览过网页历史记录。 Angular路由器借鉴了这种模式。...在任何使用路由器功能Dart文件中,导入路由器库: import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令 如果您已经熟悉Angular...路由,请提醒您需要做什么: 选择一个位置策略。...定义路由如何根据URL模式导航组件。 大多数路由由路径,路由名称和组件类型组成。 RouterOutlet 指示路由应该显示视图指令()。...Link parameters list 路由将其解释为路由指令列表。 您可以将该列表绑定RouterLink将该列表作为参数传递给Router.navigate方法。

6.1K20

教程|在 Angular 4 中加载功能模块(下)

将 weather 和 currency 文件夹复制主应用程序目录中,如下所示。 图 8. 将辅助模块添加到主应用程序目录 ?...该地址是 WeatherModule 文件位置(相对于应用程序根目录),后跟 # separator,再后面是已导出模块类名称 WeatherModule。...Currency 模块配置完全相同。 当路由器导航更新后地址时,它会使用 loadChildren 字符串动态加载 WeatherModule CurrencyModule。...您会看到两个针对 “chunk” 文件行,它们是被 angular-cli 自动添加。这些行表示您惰性加载模块。...请参见 Angular 文档 路由和导航 部分,了解如何自定义预加载配置。 结束语 加载时间是应用程序性能关键因素,它会影响应用程序用户体验。

2.3K10

Angular快速学习笔记(2) -- 架构

templateUrl:该组件 HTML 模板文件相对于这个组件文件地址,实现html与js分离,推荐 可以用 template 属性值来提供内联 HTML 模板,类似vuejs和react文件...每种形式都有一个方向 —— 从组件 DOM、从 DOM 组件双向 ?...如何使用: 在 Angular 中,要把一个类定义为服务,就要用 @Injectable 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入组件中 使用 @Injectable 装饰器来表明一个组件其它类...1.4 路由(Routing) Angular Router 模块提供了一个服务,它可以让你定义在应用各个不同状态和视图层次结构之间导航时要使用路径。...它工作模型基于人们熟知浏览器导航约定: 在地址栏输入 URL,浏览器就会导航相应页面 在页面中点击链接,浏览器就会导航一个新页面 点击浏览器前进和后退按钮,浏览器就会在你浏览历史中向前向后导航

5.2K20

WebStorm for Mac(JavaScript开发工具)中文版

Angular应用程序检查对于Angular应用程序,WebStorm添加了17项检查,可帮助您在键入时检测应用程序中Angular特定错误,并建议快速修复。...Angular项目中导航更容易在Angular应用程序中,您现在可以使用相关符号...弹出窗口(Ctrl-Cmd-Up / Ctrl + Alt + Home)在不同组件文件(如TypeScript...突出显示测试中失败行当您使用Jest,Karma,MochaProtractor运行测试并且某些测试失败时,您现在可以在编辑器中看到问题发生位置。...现在,您可以跳到从步骤.feature文件 它们定义中 .ts文件中使用速战速决(和产生缺定义Alt-Enter组合)。...最近位置弹出在最近位置弹出(Cmd移-E / 按Ctrl + Shift + E)是一种方式 浏览各地项目。它显示了最近在编辑器中打开所有文件和代码行列表。

4.9K50

【译】.NET Core 3.0 Preview 3中关于ASP.NET Core更新内容

此模板被设计为运行长时间运行后台进程起点,就像您可能作为Windows服务Linux守护进程运行一样。例如,从消息队列生成/消费消息,或者监视要处理文件。...在本节中,我们将展示如何创建一个AngularReact模板,该模板允许我们对用户进行身份验证并访问受保护API资源。...创建Angular应用程序 要创建一一个支持身份验证Angular应用程序,我们需要调用以下命令: 1: dotnet new angular -au Individual 这个命令创建一个...Angular模块所构建身份验证和授权支持,可以导入应用程序中,并提供一套组件和服务来增强主应用程序模块功能。...路由 在preview3中,我们将SignalR hubs连接到最近发布端点路由特性中。

22.6K10

Node.js-具有示例API基于角色授权教程

下载克隆教程项目代码 2.通过从项目根文件夹(package.json所在位置)中命令行运行npm install来安装所有必需npm软件包。...1.从https://github.com/cornflourblue/angular-9-role-based-authorization-example下载克隆Angular 9教程代码 2.通过从项目根文件夹...如果将角色参数留为空白,则路由将被限制到任何经过身份验证用户,无论角色如何。在用户控制器中使用它来限制对“获取所有用户”和“按ID获取用户”路由访问。...api入口点,它配置应用程序中间件,将控制器绑定路由并启动apiExpress Web服务器。...订阅我YouTube频道,或者在TwitterGitHub上关注我,以便在我发布内容时收到通知。

5.7K10

如何在 ASP.NET MVC 中集成 AngularJS(1)

幸运是,捆绑和压缩是 ASP.NET 4.5 ASP.NET 中一项功能,可以很容易地将多个文件合并捆绑一个文件中。你可以创建 CSS,JavaScript 和其他包。...我有两个选择,要么直接嵌入 NG-View 代码母版页 _Layout.cshtml 使用 Razor 视图将它注入母版页。我决定简单地从索引 Razor 视图中注入标签。...将会发生是,你会获得一个叫做找不到该路由视图控制器错误。...由于我有三个视图文件夹,主文件夹、客户文件夹和产品文件夹,我增加了一下 MVC 路由配置类以便将所有的请求路由主/索引路由中。当应用程序运行时点击 F5,同样也会进入 MVC 路由表。...就 Angular 和单页面如何运行而言,当你点击 F5 时,基本上就是重启了 AngularJS 应用。 有了这些额外路由,现在就可以直接执行 AngularJS 路由了。

7.5K60

Blazor 中路由路由模板

在客户端上,路由器参与多种情况,最常见情况是用户单击链接、表单上提交按钮下拉列表中触发服务器调用项。路由器绑定内部位置更改事件,并从客户端处理导航请求路径整个过程。...毋庸置疑,当应用程序位置以编程方式更改时,路由器也会启动。最后一点也非常重要,路由器在浏览器历史记录中记录任何它负责位置更改,因此后退和前进按钮可以按用户期望工作。...路由器之战:Blazor 与Angular 很长一段时间,路由逻辑实现都隐藏在 Web 服务器服务器端框架(如 ASP.NET)折叠中。...路由实现是通过 SPA 框架(其中 Angular 最为出色)移动到客户端。让我们花点时间对合并 Angular 路由器和仍在使用 Blazor 路由器中功能进行简要比较。...与 Angular 路由器不同,它在获取路由参数后无法异步运行解析步骤。最后,Blazor 路由器不支持条件重定向备用路由 - 这也是 Angular 路由器可以做到

8.3K21

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券