小编Mis*_*ses的帖子

我有一个场景，我有一条路线

<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>

在控制器中，我想取消基于值的路由导航。

export class HeroListComponent implements OnInit {
 cancelRoute : boolean = true

  constructor(
   //some logic where before the route is navigated to, I want it to cancel the route
   // and log a message to console
   //console.log('successfully, canceled route');
  ) {}

编辑

我不希望通过 Route Guard 完成此操作，我希望在组件级别完成此操作。我的页面上有一个组件，我想取消路线导航。

这是我的用例。

我有一个托管多个组件的页面，如果有人离开该页面，我想检查组件 A 并确保在他们离开之前没有任何未保存的数据。

编辑2

“我不希望通过路线守卫来完成这件事”。为什么？这本质上就是 CanDeactivate 守卫存在的目的。您绝对可以轻松地将它用于您的用例。

如果我错了，请纠正我，但我需要将 CanDeactivateGuard 放在每条路线上

RouterModule.forRoot([
  {
    path: 'team/:id',
    component: TeamComponent,
    canDeactivate: ['canDeactivateTeam']
  }

我不想在每条路线上都有 CanDeactivate，因为只有 1 条路线foo内部有组件。

路线有很多条，只有一条路线需要foo组件，并且他需要可以取消路线导航。据我所知， …

尝试@angular/fire在 Angular 11 和@nguniversal/express-engine(SSR) 上运行。当 initAngularFireModule在app.module.ts运行命令时有错误npm run dev:ssr或npm run serve:ssr在ng serve. angular 10 版本也有同样的问题。有没有人知道该怎么做？

app.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    AngularFireModule.initializeApp(environment.firebaseConfig),
    // AngularFirestoreModule,
    // AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
    // AngularFireFunctionsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 server/main.js 文件中错误：

globalThis.?AngularfireInstanceCache || (globalThis.?AngularfireInstanceCache = new Map());
^

ReferenceError: globalThis …

我正在 firestore auth 中动态创建用户，并添加了多种类型的声明，即管理员、讲师、助理。到目前为止admin: true，instructor: true根据我提供的登录凭据，我能够使用新创建的用户登录并获取 claim 属性为 true 。但是我无法[AuthGuard]在路由中正确设置，甚至没有登录我就可以使用 url 重定向到组件，这不应该发生。我对如何正确添加AuthGuard. 这是我的代码

auth-service.ts

import * as firebase from 'firebase/app';

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';
import { Observable } from 'rxjs/Observable';
import { Router } from "@angular/router";

@Injectable() 
export class AuthService {
public user: Observable<firebase.User>;
public userDetails: firebase.User = null;

constructor(private _firebaseAuth: AngularFireAuth, …