在Angular 4中路由后重新加载js

在Angular 4中，当路由发生变化时重新加载JS可以通过以下步骤实现：

首先，在Angular 4中，路由是通过Angular的Router模块来管理的。要重新加载JS，可以在路由配置中使用component属性来指定要加载的组件。
在路由配置中，可以使用component属性来指定要加载的组件。例如，如果要加载一个名为MyComponent的组件，可以将其指定为路由配置的component属性的值。
当路由发生变化时，Angular会自动加载指定的组件，并执行组件中的相应逻辑。在组件中，可以通过ngOnInit生命周期钩子函数来执行需要重新加载的JS逻辑。
在ngOnInit函数中，可以使用require函数来动态加载JS文件。例如，如果要重新加载一个名为myScript.js的JS文件，可以使用以下代码：

ngOnInit() {
  require('./myScript.js');
}

通过以上步骤，当路由发生变化时，Angular会重新加载指定的组件，并执行ngOnInit函数中的代码，从而实现重新加载JS的效果。

需要注意的是，以上方法只适用于重新加载JS文件，如果需要重新加载整个应用程序，可能需要使用其他方法，例如使用Angular的Router模块的navigate函数来导航到当前路由。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（MSS）：https://cloud.tencent.com/product/mss
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

相关·内容

angular2中在使用路由懒加载时候出现的错误

ERROR in Cannot use 'in' operator to search for 'providers' in null 出现这个问题的原因是，在使用懒加载的时候，没有指定module，

5.1K4 0

如何处理 Angular 单页面应用里的 a 标签，避免点击后重新加载整个应用

webmaster/homepage/images/jerry/star1.jpg);"> jerry 不幸的是这个 a 标签导致页面重新加载并且不使用...Angular 路由，换言之，它会终止 SPA 的状态。...然后使用 event 对象的 preventDefault 阻止 a 标签页造成的整个应用重新加载，然后使用 Angular route 的 navigate 进行页面内部跳转即可。...在我们这个例子，即阻止 a 元素被点击后触发的页面 reload 动作。...route: 定义单个路由的配置对象。一组路由收集在 Routes 数组中以定义 Router 配置。路由器尝试使用此对象中定义的配置选项将给定 URL 的段与每个路由进行匹配。

3.6K4 0

基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇

* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上 * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用 */ {...在 vue.config.js 修改完成后，我们重新启动 Vue 微应用，然后打开主应用基座 http://localhost:9999。...* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上 * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用 */ {...在 config-overrides.js 修改完成后，我们重新启动 React 微应用，然后打开主应用基座 http://localhost:9999。...* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上 * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用 */ {

6.4K4 0

教程|在 Angular 4 中加载功能模块（下）

当路由器导航到更新后的地址时，它会使用 loadChildren 字符串动态加载 WeatherModule 或 CurrencyModule。...在这种情况下，在贪婪加载主要模块后，路由器开始预加载标有 loadChildren 属性的所有剩余模块。要为预加载重新配置应用程序，可编辑您的 app-routing.module.ts，如下所示。...在 Chrome 浏览器中重新加载该应用程序，然后转到 Chrome 开发人员工具的 Network 和 Sources 选项卡。...x.chunk.js 和 y.chunk.js 文件应紧接着主应用程序后被加载，使辅助模块在用户单击这些菜单之前就已可用。...请参见 Angular 文档的路由和导航部分，了解如何自定义预加载配置。结束语加载时间是应用程序性能的关键因素，它会影响应用程序的用户体验。

2.3K1 0

浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

这一篇，先说说第1种：requirejs+angular+angular-route 移动端单页面Web相对多页面来说，模块化管理显得非常重要，因为如果没有模块化，页面初始化时就把所有的js和所有模版都加载进来...main.js，这个是由requirejs引入的第一个业务js，主要是配置requirejs； router.js，这个是整个网站/app的路由配置，在实际部署中，可以把main.js和router.js...后，就做第一步工作，引入angular和angular的路由配置，然后用 angular.bootstrap(document, ['webapp']); 手工启动angular，这里webapp是router.js...如果没有使用requirejs，那么我们需要在路由配置前加载完全部controller。angular-route需要做的只是切换HTML模版，重新编译，绑定新的controller。但是。...第五步，修改angular-route，实现HTML和js打包加载。

3.3K2 0

【Hybrid开发高级系列】AngularJS(三)——开发实践

Yeoman之前，你需要确认以下配置： Node.js版本在0.10以上 npm版本在1.3.7以上安装好Node之后，你就可以用命令行来安装Yeoman了。...在执行完上述命令后，你应该会看到有四个版本号会被打印出来： • Yeoman • Bower • Grunt • GruntCLI(Grunt的命令行界面) ...当选中了’generator-angular’后，按下回车执行安装，它所依赖的Node包就会开始被下载了。 ...Angular模块是一些带有特定功能的独立的JS文件。举个例子，ngResource模块(angular-resource.js)提供了RESTful服务。你可以使用空格键来取消项目。.../angular-1.4.9/angular.js"> app

2232 0

AngularJs ng-route路由详解

/bower_components/angular-route/angular-route.js"> 这主要是因为angular-route.js需要传入window.angular这个参数...，而这个参数只有在加载完angular才会出现。...redirectTo：重定向地址 reloadOnSearch：设置是否在只有地址改变时，才加载对应的模板;search和params改变都不会加载模板 caseInsensitiveMatch：路径区分大小写...路由有几个常用的事件： $routeChangeStart：这个事件会在路由跳转前触发 $routeChangeSuccess：这个事件在路由跳转成功后触发 $routeChangeError：这个事件在路由跳转失败后触发...因此b页面，在3秒后才会加载成功。

1.9K6 1

大漠穷秋：全面解读Angular 4.0核心特性

集成开发环境@Angular4.0 2009年，出现了node.js。它的出现标志着前端开发正式进入了工业化的时代，前端工程师这个职位得以确立。 Node.js出现后，才有了完整的工具链。...把应用切分成多个模块，当用户进入index页面的时候，只加载其中的bundle-0.js，当用户点到对应模块的时候再加载其它的代码。切分模块的时候，需要在业务的文件体积和请求数量之间取得一个平衡。...做异步路由时要注意的是，写的是loadchildren，加载的对象是module而不是component。由此可见，NgModule是用来配合Angular/cli做模块的打包和加载。...在Angular新版本里，module是最小的打包和加载单位。路由守卫用来防止未授权的访问。...在前端需要对路由做一定的防护，但目前的防护还远远不够，最重头的还是在server端，Angular就提供了这样一些特性。

2.1K5 0

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

关于 Angular 各个版本的对比，大家可以参考下《谈谈Angular–从Angular1到Angular4》以及《重新认识Angular》。...当然脏检查的方式曾经也带来性能问题，后面在加入树状的模块化、Zone.js 之后，即使没有虚拟 DOM，性能也是有大大的提升。...我们可以把首屏相关的东西打包到 bundle，其他模块分块打包到 chunk，来在需要的时候再进行加载。路由异步加载通常情况下，我们会结合路由进行分块打包，路由管理工具大部分都支持异步加载。...我们可以根据自己需要，来打包成多个文件，在路由进入的时候才获取和加载。Vue 的话可参考《Vue2使用笔记17–路由懒加载》，打包效果像这样： ?...也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

9971 0

8分钟为你详解React、Angular、Vue三大框架

componentDidMount是在组件 "挂载 "后调用的（组件已经在用户界面中创建了，通常是通过将其与DOM节点关联起来）。这通常用于通过API从远程数据源触发数据加载。...每个组件在渲染过程中都会跟踪其反应式的依赖关系，因此系统可以精确地知道什么时候重新渲染，以及哪些组件需要重新渲染。...它支持将嵌套路由映射到嵌套组件，并提供精细化的过渡控制。添加了vue-router后，组件只需映射到它们所属的路由，父/根路由必须指明子路由的渲染位置。 ?...Vue CLI - 用于快速开发Vue.js的标准工具书 Vue Loader - 一个webpack加载器，允许以单文件组件（SFCs）的格式编写Vue组件。...8、官方程序库 Vue Router - Vue.js的官方路由器 Vuex – 基于 Flux模式的 Vue.js 的集中式状态管理。

22.1K2 0

Web性能优化：前端三大框架在Chrome最新性能指标上的表现

它不包括处理事件处理程序、处理同一页面上的后续交互或在事件回调运行后绘制下一帧的时间。但是，响应能力对于整个页面生命周期的用户体验至关重要，因为用户在页面加载后大约 90% 的时间都花在页面上。...我们与 Next.js、Nuxt.js、Gatsby 和 Angular 合作开发了在框架内提供强大默认值以优化性能的解决方案。...Next.js 正在开发一个新的路由框架，它将默认使用 startTransition 进行路由转换。这个目标是允许 Next.js 网站所有者采用 React 时间片并提高路由转换的响应能力。...Angular Angular团队正在探索几个想法，这些想法应该也有助于INP的发展。无特定区域性。缩减初始包的大小，以及在应用程序呈现任何东西之前必须加载的必要代码。 Hydration。...使最初的JS包更小。更好地支持加载指标：。例如，在SSR重新渲染期间，在routing期间，以及在懒加载操作中。剖析工具。更好的开发工具来了解交互成本，特别是围绕特定交互的变化检测成本。

4.3K5 1

Angular 从入坑到挖坑 - Router 路由使用入门指北

至于路由守卫、路由懒加载等“高级”特性，并不会在本篇文章中呈现对应官方文档地址：路由与导航配套代码地址：angular-practice/src/router-tutorial 二、Contents...当定义好路由信息后，我们需要在页面上使用标签来告诉 Angular 在何处渲染出页面。...从截图中可以看到，当我们打开系统时，会自动跳转到我们指定的 home 路径，点击菜单按钮后，则会加载对应的组件页面 4.1.4、激活的路由很多情况下，对于被选中的路由，我们可能会添加一个特定的样式来进行提示用户...同样的，我们也可以在 js 中完成路由的跳转，对于这种使用场景，我们需要在进行 js 跳转的组件类中通过构造函数依赖注入 Router 类，之后通过 Router 类的 navigate 方法完成路由的跳转...，在跳转后的页面我们肯定需要获取到传递的参数值。

4.2K5 0

Angular CLI 简介

下面执行ng lint --fix: 执行后lint的错误减少到了一个, 看下代码: 使用Angular CLI从蓝本生成代码第一篇文章是: "使用angular cli生成angular5项目...打开main.bundle.js可以看到我写的代码: 下面运行程序: ng serve -o: 可以看到在ng serve的时候, 加载了上述的文件....已经一直在用了, 下面看看它常用的参数: --open -o 打开默认浏览器 --port -p 端口 --live-reload -lr 发生变化时重新加载网页(默认开启的) --ssl 使用https...首先创建一个angular项目, 带路由的: ng new sales --routing 创建好项目后, 直接执行命令测试: ng test 然后会弹出一个页面, 就是测试的结果数据....看一下项目: 配置文件protractor.conf.js已经配置好. 而测试文件是在e2e目录下.

6K11 0

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

// Angular的配置文件 |-- browserslist // 配置浏览器兼容性的文件 |-- karma.conf.js // 自动化测试框架Karma的配置文件 |-- package-lock.json...生命周期钩子详解：https://angular.cn/guide/lifecycle-hooks 当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法...钩子用途及时机 ngOnChanges() 当 Angular（重新）设置数据绑定输入属性时响应。...修改项目默认调转页面，Angular应用多模块路由配置：找到app-routing.module.ts文件，在【routes】对象中声明新模块路由，以及项目默认调转页面地址修改。 ?...，我们可以通过延迟加载子路由的方式来加载相关模块的子路由。

3.8K2 0

【Hybrid开发高级系列】AngularJS(一)——基础专题

1 开发环境配置 1.1 mac下node js安装　　一向不喜欢追求刚刚新鲜出炉的事物的我，终于在node js出来一年后开始迈出脚步。　　废话少说，先把环境给配置好。...您需要安装Node.js和Testacular来运行本项目,请到Node.js官方网站下载并安装最新版,然后把node可执行程序路径添加到系统环境变量PATH中,完成后在命令行中运行一下命令可以查看是否安装成功.../angular.js"> 这行代码载入angular.js脚本,当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本,angular.js脚本运行后将会寻找含有...推荐将angular组件独立分离在不同的文件中，module文件中声明module，其他组件则引入module，需要注意的是在打包或者script方式引入的时候，我们需要首先加载module声明文件，然后才能加载其他组件模块... }) HTML Codes 2.8 事件处理器 2.8.1 事件监听 2.8.1.1 内置事件 includeContentLoaded(emit事件) ngInclude内容重新加载的时候

3948 0

Angular 1 vs. Angular 2 深度比较

2.8K10 0

我的第一个React应用

前言说起前端框架，我的第一反应就是Angular，Vue和React了，在实习的时候Vue和Angular都使用过，也写过相关的博客，包括自己毕业设计就是Angular来做的，但是毕业之后，在现在家公司就没有机会去使用这些框架...当这里应用就成功的创建了，之后我们使用npm start来启动React 我这里出现报错，同事跟我说要我把node_moudle文件夹删掉，在项目的目录下重新运行 npm install命令 ?...此时启动就没有问题，浏览器打开界面如下，这里加载的界面就是App.js里面的内容 ? 目录结构： ?...，import导入App和自己创建的index，将两个页面组件使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载响应的页面。...,一系列复杂的配置,搭建好开发环境后写src源代码。

2.1K5 1

Angular SSR 探究

你知道 Angular Universal 吗？可以帮助网站提供更好的 SEO 支持哦！一般来说，普通的 Angular 应用是在浏览器中运行，在 DOM 中对页面进行渲染，并与用户进行交互。...这么做的好处是，我们可以先用静态网页抓住用户的注意力，在用户浏览网页的时候，同时加载整个 Angular 应用。这给了用户一个非常好的极速加载的体验。...这是因为 Angular 使用了动态路由，比如 /product/:id 这种路由，而页面的渲染结果要经过 JS 的执行才能知道，因此，Angular 使用了 Express 作为 Web 服务器，能在服务端运行时根据用户请求...重新执行预渲染命令（npm run prerender 或者使用命令行参数则按照上面中的命令执行），编译完成后，再打开 dist//browser 下的 index.html...在 Angular 14 中，如果路由界面通过 Routes 配置，可以将网页的静态 title 直接写在路由的配置中：{ path: 'home', component: AbmHomeComponent

10.2K5 1

Angular的12个经典问题，看看你能答对几个？（文末附带Angular测试）

ngAfterViewInit：Angular创建组件的视图后。 ngAfterViewChecked：在Angular检查组件视图的绑定之后。 2. ...Angular 2中的路由工作原理是什么？路由是能够让用户在视图/组件之间导航的机制。Angular 2简化了路由，并提供了在模块级（延迟加载）下配置和定义的灵活性。 ...保护运行后，它将解析路由数据并通过将所需的组件实例化到中来激活路由器状态。...此外，还可以相对很好地管理shadow DOM，同时检测Angular 2应用的改变，并且可以有效地管理视图的重新绘制。...其中，反应最为迅速的就是Wijmo，Wijmo 在 Angular2 发布几个小时后就发布了支持 Angular2 正式版本的 Wijmo。

17.3K8 0

如何在 ASP.NET MVC 中集成 AngularJS（2）

").Include( "~/Scripts/angular.min.js", "~/Scripts/angular-route.min.js",..."~/Scripts/angular-sanitize.min.js", "~/Scripts/angular-ui.min.js", "~/Scripts/...angular-ui/ui-bootstrap.min.js", "~/Scripts/angular-ui/ui-bootstrap-tpls.min.js",..."~/Scripts/angular-ui.min.js", "~/Scripts/angular-block-ui.js" )); bundles.Add...此外，JSON 集将被用于跟踪被加载的捆绑。一旦捆绑被加载，就不需要第二次捆绑了。有几件事情需要写入路由代码中。

8.3K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云