基于服务调用的Angular 7填充站点样式

Question

想知道处理

的最佳方法

我有一个要求我的网站样式之类的颜色，字体从config [service call]

获取

我所做的是在app.component.ts中，在onngint方法中，我正在执行服务调用并将结果作为输入字段传递给儿童模块。

app.component.ts
 brand: Brand;
ngOnInit(): void {
    this.service.getBrandData().subscribe((response) => this.brand = response);

  }
export class Brand {
  brandId: number;
  brandName: string;
  brandCode: string = null;
  brandStyle: BrandStyles;
}
export class BrandStyles {
  brandMainColor: string;
  brandFont: string;
}

和appcomponent.html，我将品牌信息作为输入字段

传递

<header [brand]="brand"></header>

和header.component.html

<div [style.backgroundColor]="brand.brandStyle.brandMainColor"
  style="margin-bottom: 30px">
Test site
</div>

问题：我看看是否有延迟通过服务获取我的品牌信息。

有关如何处理这些方案的任何建议

Answer 1

我要么在app.component.ts中提供默认的brand，要么在HTML模板中使用ngif; else模板;

<div *ngIf="brand?.brandStyle;else not_loaded">
    content here ...
</div>
<ng-template #not_loaded>Something to display when brand is not loaded...</ng-template>