javascript - 在 router.navigate 之后阻止 Angular 组件渲染

Question

如果在 ngOnInit 中执行 this.router.navigate(['someRoute'])，初始组件在重定向之前仍在渲染。

例如我有一些组件:

@Component({
  selector: 'my-app',
  template: '<child-comp></child-comp>',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private router: Router) {
  }

  ngOnInit() {
    console.log('ngOnInit from AppComponent');
    this.router.navigate(['another']);
  }
}

它包含模板中的 child :

@Component({
  selector: 'child-comp',
  template: '<div>CHILD<div>'
})
export class ChildComponent  {
  ngOnInit() {
    console.log('Should NOT be called (ChildComponent)');
  }
}

在 View 初始化之前(在 ngOnInit 钩子(Hook)内)我执行重定向到另一个组件:

@Component({
  selector: 'another-comp',
  template: '<div>Another<div>'
})
export class AnotherComponent  {
  ngOnInit() {
    console.log('Should be called (AppComponent)');
  }
}

我希望子组件不会被初始化，因为它发生在重定向调用之后，但它的 ngOnInit() 钩子(Hook)仍然被触发。

在这种情况下如何防止子组件初始化？

堆栈 Blitz : https://stackblitz.com/edit/angular-gjunnr?file=src%2Fapp%2Fanother%2Fanother.component.ts

P.S.我没有找到阻止组件渲染的方法，最终修改设计。

Answer 1

这就是守卫的用途:

创建一个守卫来确定是否允许用户访问该页面:

@Injectable({
  providedIn: 'root'
})
export class PreventNavigateGuard implements CanActivate {
  constructor(public router: Router) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    return this.router.createUrlTree(["another"]);
  }
}

然后在你的路由中使用 canActivate 来保护它:

const appRoutes: Routes = [
  { path: '', component: AppComponent, canActivate: [PreventNavigateGuard] },
  { path: 'another', component: AnotherComponent },
];

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

这是一个 stackblitz:https://stackblitz.com/edit/angular-kbzx1v