Angular 9全局警报未被触发（嵌套的出口）。

Question

我在关注这个 教程 实现了一个全局的Alert类和服务来处理应用程序中的所有错误。我试图只在登录组件上实现这个警报，但错误没有被触发，我有点迷茫，因为所有这些都与嵌套的出口有关，所以我不知道是怎么回事。

警报服务(全部采用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);
      }
    });
  }

还有其他一些关于设置引导类的方法 以及onDestroy生命周期的方法

现在，这是警报类的HTML。显示 "alert works!"的 "p "标签在整个app(子路由)中都是可见的，但是当我在订阅时发现错误时，在登录组件中却没有。

    <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-alert></app-alert> 在app.component.html中