通过rest config动态构建角度页面答案

【问题标题】：Dynamically build angular page via rest config通过rest config动态构建角度页面
【发布时间】：2019-04-23 13:31:33
【问题描述】：

我正在使用 Angular 6 构建登录页面。登录应该是可配置的，可以是使用用户名和密码的标准登录，也可以是单点登录。服务端有一个提供配置的rest接口。

页面应显示有关 SSO 或选择标准登录的不同元素。因此，我的 HTML 组件中有一个简单的 ngIf 元素。

<mat-card class="center">
  <mat-card-content>
    <div fxLayout="row" fxLayoutAlign="center" *ngIf="ssoEnabled; then ssoLogin; else devLogin"></div>
  </mat-card-content>

</mat-card>

<ng-template #ssoLogin>
  <a href="someLink" fxFlex mat-raised-button color="primary">LOGIN-SSO</a>
</ng-template>

<ng-template #devLogin>
  <button fxFlex mat-raised-button color="primary" (click)="login()">LOGIN</button>
</ng-template>

'ssoEnabled' 变量通过 ngOnInit() 方法在 component.class 中初始化：

export class LoginComponent extends BaseComponent {
  public ssoEnabled: boolean;

  //constructor and other content

  ngOnInit(): void {
    this.http.get('/config/sso/enabled').subscribe(value => this.ssoEnabled = Boolean(value));
  }
}

我现在的问题是，当页面被渲染时，变量“ssoEnabled”总是未定义，我的 ngIf 没用。我认为页面是在 http 调用返回之前呈现的。我在我的 ngOnInit 函数中尝试了几件事，例如管道或异步/等待模式，但变量始终保持未定义。

有人对此有解决方案吗？也许我的用例也有更好的解决方案？

【问题讨论】：

将默认值设置为 ssoEnabled 变量。并显示加载程序，直到您从服务器获得响应时收到服务器的响应。然后显示适当的视图并隐藏加载器
在收到回复之前如何显示负载？
使用这个库github.com/kuuurt13/ng-block-ui#readme我在很多项目中都使用过这个，

标签： angular typescript

【解决方案1】：

因为 subscribe 是异步函数。在从休息中得到答案之前渲染页面。您可以通过以下方式在类中定义 ssoEnabled：

public ssoEnabled = false;

您必须选择默认行为 false 或 true 并使用它！祝你好运！

【讨论】：

那么我总是有默认行为吗？
是的，页面加载行为。首先你想看什么？
我想先看看服务器上配置了什么。
这个默认值会在服务器响应之前，在你得到服务器响应之后你会看到服务器上的配置。