angular - Angular 8，当条件为真时，组件未在 HTML 中加载

Question

我现在面临一个奇怪的问题，它以前一直在工作。我正在使用 Angular 8。请看这个。

应用组件.ts

constructor(private readonly oidcFacade: OidcFacade) {
    this.loading$ = this.oidcFacade.loading$;
    this.expiring$ = this.oidcFacade.expiring$;
    this.expired$ = this.oidcFacade.expired$;
    this.loggedIn$ = this.oidcFacade.loggedIn$;
    this.errors$ = this.oidcFacade.errors$;
    this.identity$ = this.oidcFacade.identity$;
  }

  ngOnInit() {
    this.oidcFacade.getOidcUser();

    this.oidcFacade.getUserManager().getUser().then( user => {
      if (user) {
        console.log('Analytics Logged In');
        console.log('this.loggedIn$', this.loggedIn$);
      } else {
        this.oidcFacade.signinRedirect();
      }
    });
  }

我正在使用 OIDC 客户端进行身份验证。第一次，当用户未登录时，它会重定向进行身份验证，获取令牌并返回。这个过程使 this.loggedIn$ 和其他对象被实例化。

App.component.html

<ng-container *ngIf="loggedIn$ | async;">
  <app-dashboard></app-dashboard>
</ng-container>
<ng-template #notLoggedIn>
  <app-progress-spinner
    [color]="color" [mode]="mode"
    [value]="value" [diameter]="diameter">
  </app-progress-spinner>
</ng-template>

这将显示一个材料加载图标，直到身份验证完成，loggedIn 变量将为 true 并且 app-dashboard 将被呈现。

假设这段代码在一个名为 /dashboard 的菜单上，如果我有时让我的应用程序空闲并返回另一个菜单并返回 /dashboard，它会一直显示 app-progress-spinner。

需要注意的重要一点是，控制台会打印“Analytics Logged In”和带有 this.loggedIn 的对象，只有在身份验证完成后才会为真。如果我检查控制台和元素部分，它只显示 app-progress-spinner 组件，而不显示 app-dashboard。

有任何想法吗？它很奇怪。它有时有效，有时我只得到加载图标。

是因为 Angular 8 还是我在这里缺少的其他东西？

提前致谢。

标签： angulartypescriptangular8

Answer 1

我得到了解决方案。似乎问题出在 package.json 中提到的最新下载的角度核心文件上。

默认情况下，所有文件都带有 ^ cap 和 ~ 附加在 package.json 中的库版本。

我之前的代码如下所示：

"dependencies": {
    "@angular/animations": "^8.1.1",
    "@angular/cdk": "^8.0.2",
    "@angular/common": "^8.1.1",
    "@angular/compiler": "^8.1.1",
    "@angular/core": "^8.1.1",
    "@angular/forms": "^8.1.1",
    "@angular/material": "^8.0.2",
    "@angular/platform-browser": "^8.1.1",
    "@angular/platform-browser-dynamic": "^8.1.1",
    "@angular/router": "^8.1.1",
    "@ngrx/effects": "^8.1.0",
    "@ngrx/router-store": "^8.1.0",
    "@ngrx/store": "^8.1.0",
    "@ngrx/store-devtools": "^8.1.0",
    "core-js": "^2.6.1",
    "jquery": "3.4.1",
    "ngx-cookie-service": "^2.2.0",
    "oidc-client": "1.8.2",
    "rxjs": "^6.5.2",
    "zone.js": "~0.9.1"

我从版本中删除了所有 ^ 和 ~ 。它只允许告诉 Angular 下载提到的特定版本库，而 ^ 和 ~ 允许 Angular 下载下一个次要补丁版本。

我不确定，但不知何故下载的补丁版本可能会导致问题。我把它改成这样：

"dependencies": {
    "@angular/animations": "8.1.1",
    "@angular/cdk": "8.0.2",
    "@angular/common": "8.1.1",
    "@angular/compiler": "8.1.1",
    "@angular/core": "8.1.1",
    "@angular/forms": "8.1.1",
    "@angular/material": "8.0.2",
    "@angular/platform-browser": "8.1.1",
    "@angular/platform-browser-dynamic": "8.1.1",
    "@angular/router": "8.1.1",
    "@ngrx/effects": "8.1.0",
    "@ngrx/router-store": "8.1.0",
    "@ngrx/store": "8.1.0",
    "@ngrx/store-devtools": "8.1.0",
    "core-js": "2.6.1",
    "jquery": "3.4.1",
    "ngx-cookie-service": "2.2.0",
    "oidc-client": "1.8.2",
    "rxjs": "6.5.2",
    "zone.js": "0.9.1"

同样，我也为核心开发依赖库做了。

谢谢你。