如何以角度明智地制作组件视图的加载器答案

【问题标题】：how to make loader for component view wise in angular如何以角度明智地制作组件视图的加载器
【发布时间】：2020-01-17 08:35:31
【问题描述】：

当视图加载而不是隐藏加载器时，我尝试为每个组件视图制作加载器。查看数据来自api

我的组件结构如下图<app-main></app-main>

<app-banner></app-banner>
<app-data></app-data>
<app-users></app-users>

当从 api 数据加载视图时，我已经为每个组件制作了加载器

banner, data, users 的加载器，当数据加载加载器在获取数据加载器隐藏后显示时

我怎样才能像这样制作装载机

【问题讨论】：

只使用 IsdataLoaded=false;您的 component.ts 文件中的变量，并在您的 http 响应中将其设置为 true；然后在你的标签中使用 *ngIf="IsdataLoaded" (app-banner, app-data, app-user)

标签： html css angular components loader

【解决方案1】：

尝试为您的加载器组件使用和@Input：

@Component({
    selector: "app-loader",
    templateUrl: ["./app-loader.component.html"]
})
export default class LoaderComponent{
  @Input() isLoaded: boolean = false;
  ...
}

并将 if 添加到您的模板中

【讨论】：

【解决方案2】：

你必须创建一个<app-loader></app-loader> 组件

它应该是可共享的

只要保持在<main-app></main-app>里面

各个组件的 ngOninit() 只会在响应可用时使 <app-loader></app-loader> 不可见

【讨论】：