账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    angular 路由跳转 参数也能拿到 走了constructor但是没执行 ngOinit
    55
    0

    现在是这样 扫码打卡 打卡成功图标亮起 点击点亮图标可跳转路由
    路由 通过复制链接确实变了 但是上一个路由的元素仍然显示是什么鬼
    就是路由组件的元素 重叠在一起了现在在当前
    但是 如果刷新 再点击跳转就没问题
    前一个路由

    发现 constructor中获取参数是走了的 但是没有走 ngOnInit

      openPassModal(stage_id) {
        console.log('过关关卡:' + stage_id);
        if (this.userStage.all_pass && this.userStage.all_pass.received_at == 0) {
          this.isPassAllVisible = !this.isPassAllVisible;
        } else {
          console.log('跳转奖品码' + stage_id);
          this.router.navigate([`/page/prizeCode`], {
            queryParams: {
              id: stage_id
            }
          })
        }
      }

    当前路由

    
      ngOnInit() {
        this.getUserStage();
      }
    
      getUserStage() {
        this.api.userStage.detail({}).subscribe(res => {
          this.userStage = res;
          this.userStage.first_win && this.userStage.first_win.winning_at != 0 && this.userStage.first_win.received_at == 0 && this.id ? this.getFirstPrize() : '';
          this.userStage.all_pass && this.userStage.all_pass.winning_at != 0 && this.userStage.all_pass.received_at == 0 && !this.id ? this.getAllPrize() : '';
        })
      }

    当前路由也能获取到传参 就是渲染重叠了 不知道为什么
    求大神指教

    2
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 时光、生本性 普通会员 1楼

      在Angular中,路由跳转时可以携带参数,并在目标组件中通过ActivatedRoute服务获取这些参数。如果你已经成功获取了参数,但是constructor执行后 ngOnInit没有执行,这通常是不正常的Angular组件生命周期行为。

      Angular确保在构造函数执行完毕后一定会调用ngOnInit方法。请检查以下几个可能的情况:

      1. 确保你正确实现了 OnInit接口,并且在对应的类中定义了ngOnInit方法: ```typescript import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router';

      @Component({ selector: 'app-your-component', templateUrl: './your.component.html', styleUrls: ['./your.component.css'] }) export class YourComponent implements OnInit {

      constructor(private activatedRoute: ActivatedRoute) { }

      ngOnInit(): void { this.activatedRoute.params.subscribe(params => { console.log('Params:', params); // 对参数进行处理... }); } } ```

      1. 检查是否有其他异常阻止了ngOnInit的执行,比如在ngOnInit或其内部订阅中发生了错误,导致后续代码未执行。可以在ngOnInit中添加try/catch以捕获可能的错误。

      2. 如果你的组件是在动态创建(如使用ComponentFactoryResolver)或者特殊的条件渲染下,那么需要确保满足正确的渲染条件才能触发ngOnInit。

      正常情况下,Angular会确保在组件实例化并准备就绪后调用ngOnInit。如果上述情况都已排查仍存在问题,请提供更多详细信息以便于进一步分析。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部