Angular 8，当条件变为真时，组件未加载到HTML中

我现在面临一个奇怪的问题，这个问题以前是有效的。我用的是角度8。请看这个

App.component.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，并呈现应用程序仪表板

假设此代码位于名为/dashboard的菜单上，如果我有时让应用程序处于空闲状态，然后返回另一个菜单并返回/dashboard，它将继续显示应用程序进度微调器

需要注意的一点是，console打印“Analytics Logged In”和带有this.loggedIn的对象，该对象仅在身份验证完成时才为真。 如果我查看console和elements部分，它只显示应用程序进度微调器组件，而不显示应用程序仪表板

有什么想法吗？真奇怪。它有时工作，有时我只得到加载图标

是因为8号角还是我在这里遗漏了什么

---

提前谢谢。

我得到了解决方案。问题似乎在于package.json中提到的最新下载的angular core文件

默认情况下，所有文件都附带有^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"

我已从版本中删除所有^and~。它将允许告诉Angular仅下载上述特定版本库，而^and~允许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"

类似地，我也为核心devdependences库做了同样的工作

---

谢谢。

我找到了解决办法。问题似乎在于package.json中提到的最新下载的angular core文件

默认情况下，所有文件都附带有^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"

我已从版本中删除所有^and~。它将允许告诉Angular仅下载上述特定版本库，而^and~允许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"

类似地，我也为核心devdependences库做了同样的工作

---

谢谢。

试着关闭

常春藤渲染器

，它还被窃听了，并且在其他情况下给我造成了类似的问题。在tsconfig.app.json

中的“angularCompilerOptions”：{“enableIvy”：true}

。也许这会有帮助。当然，我会试试看。默认情况下，我的tsconfig.json中没有这些设置。这意味着它正在将其enableIvy构建为off。请在

this.oidcFacade.loggedIn$中设置值的位置发布代码。您没有设置任何值。身份验证完成后，OIDC客户端库将自动执行此操作。如果您继续使用该应用程序，默认情况下它会工作。如果您保持它空闲并更改选项卡，然后返回此选项卡代码，则会显示加载图标。好的，您可以尝试订阅可观察对象，并检查控制台中的值是否正确。在ngOnInit
this.loggedIn$.subscribe中（状态=>console.log（状态））
。控制台中填充的值是什么？请尝试关闭
Ivy渲染器
，它还存在错误，并在其他情况下导致类似问题。在tsconfig.app.json
中的“angularCompilerOptions”：{“enableIvy”：true}
。也许这会有帮助。当然，我会试试看。默认情况下，我的tsconfig.json中没有这些设置。这意味着它正在将其enableIvy构建为off。请在
this.oidcFacade.loggedIn$中设置值的位置发布代码。您没有设置任何值。身份验证完成后，OIDC客户端库将自动执行此操作。如果您继续使用该应用程序，默认情况下它会工作。如果您保持它空闲并更改选项卡，然后返回此选项卡代码，则会显示加载图标。好的，您可以尝试订阅可观察对象，并检查控制台中的值是否正确。在ngOnInit
this.loggedIn$.subscribe中（状态=>console.log（状态））
。控制台中填充了哪些值？