Angular6：数据未传递到子组件

Question

我正在尝试在加载页面时显示加载消息。我已经创建了加载器组件作为子组件，并且从父级传递了值。但是由于某种原因，加载器没有被加载。

我尝试了以下代码。

我为加载器创建了一个组件，如下所示：

loader.ts

@Input() showLoader: boolean = false;

loader.html

<div class="modal-backdrop in" [style.display]="showLoader ? 'block' : 'none'">

现在，从组件中，我需要显示此加载器，然后传递值，如下所示：

html

<app-loader [showLoader]="loaderOn"></app-loader>

ts

public loaderOn: boolean = false;

ngOnInit() {
    this.loaderOn = true;
}

Answer 1

您共享的代码应该可以工作……代码中可能缺少某些内容或错误；为了使更改更明显，我在ngOnInit（）中添加了2秒的延迟；

相关的 app.component.ts ：

  loaderOn: boolean = false;

  ngOnInit() {
    setTimeout(() => {
      this.loaderOn = true;
    }, 2000)
  }

相关的 app.component.html ：

Value sent from the parent: <mark>{{loaderOn}}</mark>
<app-loader [showLoader]="loaderOn"></app-loader>

相关的 loader.component.html ：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-loader>',
  template: `
    <p>Value received in the child: <mark>{{showLoader}}</mark> </p>

    <div class="modal-backdrop in" [style.display]="showLoader ? 'block' : 'none'">
    ...this is the div which we wanted to style...
    </div>
  `,
  styles: [`*{color:blue}`],
})
export class LoaderComponent {
  @Input() showLoader: boolean = false;

}

完成working stackblitz here

Answer 2

为什么不只使用ngIf？

loader.html

<div class="modal-backdrop in">

隐藏并显示

<app-loader *ngIf="loaderOn"></app-loader>