Angular:通过路由切换页面后,ngOnInit()不会被触发的问题

描述:

我在在使用angular 9版本,出现这样一个问题:我通过路由进入页面时候,会执行ngOnInit,切换到其他页面再切回,此时这个页面的ngInit不会主动执行

原因:

在Angular中,当一个组件被创建时,它的生命周期方法 ngOnInit() 会在组件初始化时自动执行一次。然而,当你通过路由导航切换到其他页面,再切回到原来的组件页面时,ngOnInit() 方法不会再次主动执行。

这是因为在路由导航过程中,Angular的路由器默认会重用已经创建的组件实例,而不是销毁和重新创建。因此,ngOnInit() 方法只会在组件第一次创建时调用一次。

如果你希望在每次切换回组件页面时都执行某些操作,可以考虑使用Angular的 ActivatedRoute 和 Router 来监听路由事件并触发相应的处理逻辑。

下面是一个示例代码,展示了如何在每次路由切换回组件时主动执行一些代码:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';@Component({...
})
export class YourComponent implements OnInit {constructor(private route: ActivatedRoute, private router: Router) {}ngOnInit(): void {// 监听路由导航事件this.router.events.subscribe(event => {if (event instanceof NavigationEnd) {// 检查当前路由是否与要执行代码的组件匹配if (this.route.snapshot.routeConfig.path === 'your-route-path') {// 执行你想要的操作,比如刷新数据等this.yourCustomFunction();}}});}yourCustomFunction(): void {// 在这里编写你想要执行的代码console.log('ngOnInit is called every time the route is navigated to');}
}

在上面的示例中,我们使用了 Router 的 NavigationEnd 事件来监听路由导航事件。然后,我们检查当前的路由路径是否与组件的路径匹配,并在匹配时调用自定义的方法 yourCustomFunction()

请注意,上述代码中的 'your-route-path' 应该替换为你实际的路由路径,以便与要执行代码的组件相匹配。

个人的解决方案:

将要执行的函数放到其他钩子函数下,例如ngAfterViewInit()

由导航过程中,Angular的路由器默认会重用已经创建的组件实例,而不是销毁和重新创建。 是否可以控制切换路由后,让之前的实例销毁?

在Angular中,路由器默认情况下会重用已经创建的组件实例,而不是销毁和重新创建。这是为了提高性能和减少资源开销。

但是,如果你希望在切换路由后销毁之前的组件实例,可以使用路由器提供的一些选项来控制组件的销毁和重新创建行为。

一种方法是在路由配置文件中设置 runGuardsAndResolvers 选项为 always。这将强制每次导航时都销毁之前的组件实例并重新创建一个新的实例。

const routes: Routes = [{path: 'example',component: ExampleComponent,runGuardsAndResolvers: 'always'}
];

另一种方法是使用 RouteReuseStrategy 接口定制路由器的重用策略。你可以实现自己的 RouteReuseStrategy 类,并在其中定义什么时候重用组件实例以及什么时候销毁组件实例。

下面是一个简单的示例:

import { RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';export class CustomRouteReuseStrategy implements RouteReuseStrategy {shouldDetach(route: ActivatedRouteSnapshot): boolean {return false;}store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {}shouldAttach(route: ActivatedRouteSnapshot): boolean {return false;}retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {return null;}shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return false;}
}

然后,在你的模块中提供自定义的 RouteReuseStrategy

import { RouteReuseStrategy } from '@angular/router';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';@NgModule({providers: [{ provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }]
})
export class AppModule { }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/87319.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【力扣-每日一题】213. 打家劫舍 II

class Solution { public:int getMax(int n,vector<int> &nums){int a0,bnums[n],c0;for(int in1;i<nums.size()n-1;i){ //sizen-1,为0时&#xff0c;第一个可以偷&#xff0c;最后一个不能偷size-1&#xff1b;n为1时&#xff0c;最后一个可偷&#xff0c;计算…

Spring学习(七)——AOP

1. AOP 1.1 什么是 AOP AOP&#xff08;Aspect Oriented Programming&#xff09;意为&#xff1a;面向切面编程&#xff0c;通过预编译方式和运行期动态代理实现程序功能的统一维护技术。AOP 是 OOP 的延续&#xff0c;是软件开发的一个热点&#xff0c;也是 Spring 框架的一…

数据包络分析——SBM模型

写在前面&#xff1a; 博主本人大学期间参加数学建模竞赛十多余次&#xff0c;获奖等级均在二等奖以上。为了让更多学生在数学建模这条路上少走弯路&#xff0c;故将数学建模常用数学模型算法汇聚于此专栏&#xff0c;希望能够对要参加数学建模比赛的同学们有所帮助。 目录 1. …

腾讯mini项目-【指标监控服务重构-会议记录】2023-07-06

7/6 会议记录 Profile4个步骤 解压kafka消息初始化性能事件&#xff0c;分析事件将数据写入kafkaRun 开始执行各stage handler 上报耗时到otel-collector。。。 // ConsumerDispatchHandler consumer // // param msg *sarama.ConsumerMessage // param consumer *databus.K…

【rtp】mid 扩展: RtpMid 字符串扩展的解析和写入

mid 是uint8_t 类型? 扩展填写的是字符串,读取字符串后atoi 转 uint8_t : webrtc 看起来是个字符串:写入 扩展的值是改变了: 这里是更新扩展的长度: 新的大小小于原来的,没有缩减内存,而是对于多余的置位0了:if (len < current_len) {memset(

【Redis】记录一次K8S存储故障导致Redis集群拓扑异常的修复过程

文章目录 背景处理新节点遗忘旧节点 背景 集群部署在K8S环境内&#xff0c;存储使用的localpv&#xff0c;有一台K8S主机节点磁盘故障&#xff0c;导致在该节点上的redis节点均出现故障&#xff0c;主要表现为持久化失败、集群拓扑异常&#xff0c;持久化失败可以临时关闭RDB和…

Docker制作镜像并部署bind9(yum安装bind)--use

镜像制作 1.1 下载镜像 docker pull centos:centos7.9.2009 1.2 运行容器 [rootlocalhost ~]# docker run -d \ --privileged \ --namebind9 \ --restartalways \ -p 53:53/udp \ -p 53:53/tcp \ -v /data/bind9:/etc/bind \ -v /sys/fs/cgroup:/sys/fs/cgroup \ centos:ce…

冲鸭~~!10分钟部署清华ChatGLM2-6B,效果测试:不愧是中文榜单第一

来源: AINLPer公众号&#xff08;每日干货分享&#xff01;&#xff01;&#xff09; 编辑: ShuYini 校稿: ShuYini 时间: 2023-9-25 引言 今年6月份清华大学发布了ChatGLM2&#xff0c;相比前一版本推理速度提升42%。最近&#xff0c;终于有时间部署测试看看了&#xff0c;部署…

我的安卓AOSP开发使用到的教程汇总【安卓12】

目录 投屏软件日志打印脚本 bat 【gpt生成的】摄像头定位静默安装APP系统签名多线程使用APK打包APK OTA 差分包制作服务和主线程通信代码注释模板阿里云ClassAOSP教程添加默认APN关闭双击电源键打开相机 ubuntu安装遇到的bug 投屏软件 scrcpy 【设置为系统变量后 可以投屏的情…

Vue 搜索历史管理-本地持久化管理

搜搜历史管理 需求&#xff1a; 点击搜索&#xff08;添加历史&#xff09; ​ 点击 搜索按钮后 或者 底下历史记录&#xff0c;都能进行搜索&#xff08;相当于跳转到搜索的列表组件&#xff09; ​ ① 若之前 没有 相同的搜索关键字&#xff0c;则在搜素历史的最前面直接…

次时代摸鱼骚操作:人在办公室轻松观看家里电脑上的4k电影(移动端公网访问本地群辉存储视频文件)

如何使用iPhone15在办公室观看家里电脑上的4k电影&#xff1f; 文章目录 如何使用iPhone15在办公室观看家里电脑上的4k电影&#xff1f;1.使用环境要求&#xff1a;2.下载群晖videostation&#xff1a;3.公网访问本地群晖videostation中的电影&#xff1a;4.公网条件下使用电脑…

适用于初学者,毕业设计的5个c语言项目,代码已开源

C语言项目集 项目介绍 该项目适用于初学者学习c语言&#xff0c;也适用于高校学生课程设计&#xff0c;毕业设计参考。 项目并不能满足所有人的需求&#xff0c;可进行项目指导&#xff0c;定制开发。 开源地址 c语言项目代码地址 项目列表 该项目包含如下5个管理系统&am…

在线安装qt5.15之后任意版本

下载qt现在安装包&#xff1a; window安装包链接 进入cmd&#xff0c;用命令行打开安装包&#xff0c;并指定组件下载地址&#xff08;这个是关键&#xff0c;之前用的是腾讯镜像&#xff0c;出现了版本灰色无法选中问题&#xff09; .\qt-unified-windows-x64-4.6.1-online…

git的基本操作

git的基本操作 一般思路&#xff1a; 新建个人分支加粗样式–克隆远程仓库代码—编辑本地分支代码–合入master分支&#xff08;先切换到master分支&#xff09;–master分支代码push到远程仓库 1、安装好git之后必须设置用户和邮箱信息之后才能提交代码到缓存区、本地库 git …

[C++随笔录] list使用

list使用 构造函数insert && 迭代器push_back && pop_back && push_front && pop_fronterasesort && find && reverse list的底层结构就是 带头双向循环链表 构造函数 // 默认构造 list<int> lt; cout << "l…

CodeTON Round 6 (Div 1 + Div 2, Rated, Prizes!)

CodeTON Round 6 (Div. 1 Div. 2, Rated, Prizes!)(A - E) CodeTON Round 6 (Div. 1 Div. 2, Rated, Prizes!) A. MEXanized Array&#xff08;分类讨论&#xff09; 可以发现当 n < k 或者 k > x 1 的时候无法构成 &#xff0c; 其余的时候贪心的用 x 最大化贡献即…

SolidJs节点级响应性

前言 随着组件化、响应式、虚拟DOM等技术思想引领着前端开发的潮流&#xff0c;相关的技术框架大行其道&#xff0c;就以目前主流的Vue、React框架来说&#xff0c;它们都基于组件化、响应式、虚拟DOM等技术思想的实现&#xff0c;但是具有不同开发使用方式以及实现原理&#…

拒绝v-if判断组件显隐 tsx版本

定义组件map集合 根据map集合key值获取 进行组件展示 1。定义组件map集合 import {Input,Select,Radio,Checkbox,AutoComplete,Cascader,InputNumber,Switch,TreeSelect,Slider,Rate } from ant-design-vue; import {ref} from vue export const componentMap ref(new Map<…

基于win32实现TB登陆滑动验证

这里写目录标题 滑动验证触发条件&#xff1a;失败条件&#xff1a;解决方法:清除cooKie 滑动验证方式一&#xff1a;win32 api获取窗口句柄&#xff0c;选择固定位置 成功率高方式二&#xff1a; 原自动化滑动&#xff0c;成功率中 案例 先谈理论&#xff0c;淘宝 taobao.com …

ChatGPT详细搭建教程+支持AI绘画

一、AI创作系统 SparkAi系统是基于很火的GPT提问进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT系统&#xff1f;小编这里写一个详细图文教程吧&#x…