东源建设局网站,工作中最常用的45个excel技巧大全,四川省住房与城乡建设厅网站,设计企业网站哪家好描述#xff1a;
我在在使用angular 9版本#xff0c;出现这样一个问题#xff1a;我通过路由进入页面时候#xff0c;会执行ngOnInit#xff0c;切换到其他页面再切回#xff0c;此时这个页面的ngInit不会主动执行
原因#xff1a;
在Angular中#xff0c;当一个组…描述
我在在使用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 { }
