Question

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

例如，我有一些组件：

@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']);
  }
}

它在模板中包含子项：

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

在视图初始化之前（在ngOnInit钩内），我将重定向到另一个组件：

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

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

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

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

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

这是一个堆叠闪电战：https://stackblitz.com/edit/angular-kbzx1v

Answer 2

或者，您可以仅将ngIf应用于子组件，并且仅在app.component中的属性为true时才呈现它。

<child-comp *ngIf="false"></child-comp>

防止在router.navigate

2 个答案: