代码之家  ›  专栏  ›  技术社区  ›  Ara Yeressian

停止子导航角度路由器

  •  0
  • Ara Yeressian  · 技术社区  · 6 年前

    我有一个路由器,它有子路由器。父路由器有一个组件。在该组件中,我检查条件,如果失败,我将重定向。问题是子路由器组件ngonit代码被执行。有什么办法可以防止这种情况发生吗。

    const routes: Routes = [    
      {
          path: 'parent/:id',
          component: ParentComponent,
          children: [
              {
                  path: 'child',
                  component: ChildComponent
              }
          ]
      }
    ];
    
    class ParentComponent implements OnInit {
      readonly NUMBER_REGEX = /^\+?\d+$/;
      ngOnInit() {
        this.route.params.subscribe( params => {
          if (params.id) {
              if (!this.NUMBER_REGEX.test(params.id)) {
                  this.router.navigateByUrl('/not-found');              
              }
          }   
        });
      }
    }
    
    class ChildComponent implements OnInit {
      ngOnInit() {
        console.log('don\'t want this to work on /parent/string/child but still works');
      }
    }

    我知道我可以使用服务在组件之间传递数据。但我想要更干净的解决方案。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Antoniossss    6 年前

    是,如果满足(或不满足)某些条件,请使用RouteGuard阻止路由

    RouteGuards正是为了这个目的

    https://angular.io/guide/router#milestone-5-route-guards