Angular 9 未触发全局警报（嵌套插座）

Question

我正在关注此 tutorial，它已实施全局警报 class 和服务来处理应用程序中的所有错误。我试图仅在登录组件上实现此警报，但未触发错误并且我有点迷路，因为所有这些都与嵌套插座有关，所以我不确定发生了什么

警报服务（全部带bootstrap）

 private subject = new Subject<Alert>()
  private defaultId = 'default-alert';


  onAlert(id = this.defaultId): Observable<Alert> {
    return this.subject.asObservable().pipe(filter(x => x && x.id === id));
  }

alert(alert: Alert) {
  alert.id = alert.id || this.defaultId;
  this.subject.next(alert);
}

clear(id = this.defaultId) {
  this.subject.next(new Alert({ id }));
}

  success(message: string, options?: any) {
    this.alert(new Alert({ ...options, type: AlertType.Success, message }));
  }

  error(message: string, options?: any) {
    this.alert(new Alert({ ...options, type: AlertType.Error, message }));
  }
    //other methods identical for info, etc

警报组件 TS:

export class AlertComponent implements OnInit {
  @Input() id = 'default-alert';
  @Input() fade = true;

  alerts: Alert[] = [];
  alertSubscription: Subscription;
  routeSubscription: Subscription;
  constructor(private alertService: AlertService, private router: Router) { }

  ngOnInit(): void {
    this.alertSubscription = this.alertService.onAlert(this.id)
      .subscribe(alert => {
        if (!alert.message) {
          this.alerts = this.alerts.filter(x => x.keepAfterRouteChange);

          this.alerts.forEach(x => delete x.keepAfterRouteChange);
          return;
        }

        this.alerts.push(alert);
        console.log(this.alerts)

        if (alert.autoClose) {
          setTimeout(() => this.removeAlert(alert), 3000);
        }
      });

    this.routeSubscription = this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.alertService.clear(this.id);
      }
    });
  }

以及其他一些关于设置 bootstrap classes 和 onDestroy lifeCycle

的方法

现在，这是警报 Class HTML。显示 "alert works!" 的 "p" 标记在整个应用程序（子路由）中可见，但当我在订阅时发现错误时在登录组件中不可见

    <p>Alert Works!</p> 
    <div *ngFor="let alert of alerts" class="{{cssClass(alert)}}">
        <a class="close" (click)="removeAlert(alert)">&times;</a>
        <span [innerHTML]="alert.message"></span>
    </div>

还有我的导航栏，其中有嵌套的出口和对警报组件的引用： ...

<div class="container">
    <app-alert></app-alert>
    <router-outlet></router-outlet>
  </div>

登录组件上的实现：

onSubmit() {

    this.alertService.clear();


    if (this.loginForm.invalid) return;




    this.auth.login(credentials)
      .pipe(first())
      .subscribe(data => {
        let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl');
        this.alertService.success('Login successful', { keepAfterRouteChange: true });
        this.router.navigate(['/home' || returnUrl], { relativeTo: this.route });
      }, error => {
        this.alertService.error(error);
        console.log(error)
        //this.loginError=true;
      })

  }

这可能与路由配置有关？我用路由隐藏了菜单栏。这是我的主要路由文件：

export const routes: Routes = [
  {
    path: '', component: NavbarComponent,
    children: [
      { path: 'home', component: HomeComponent },
      { path: 'admin', loadChildren: adminModule, canLoad: [AuthGuardService], canActivate: [AdminAuthGuardService] },
      { path: 'detail/:id', component: DetailComponent, canActivate: [AuthGuardService] },
      { path: 'edit/:id', component: RegisterComponent, canDeactivate: [EditUserGuardService] },
      { path: '', redirectTo: 'home', pathMatch: 'full' },
    ]

  },
  { path: 'register', component: RegisterComponent },

  { path: 'login', component: LoginComponent },

  { path: '**', pathMatch: 'full', redirectTo: 'login' },

];

此时我无法弄清楚为什么没有触发警报。代码对我来说似乎是正确的，我看不到这个实现有任何逻辑错误......有人可以看一下吗？谢谢

Answer 1

请在app.component.html

中移动<app-alert></app-alert>

Angular 9 未触发全局警报（嵌套插座）

Angular 9 Global Alert not being triggered (nested outlet)

global

nested-routes

angular