Angular6：數據未傳遞給子組件

Question

我正在嘗試在加載頁面時顯示加載消息。 我已經將loader組件創建為子組件，並且值從父組件傳遞。 但由於某種原因，裝載機沒有加載。

我試過以下代碼。

我已經為loader創建了一個組件，如下所示：

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;

}

這里完成了stackblitz的工作

Answer 2

為什么不使用ngIf？

loader.html

<div class="modal-backdrop in">

並隱藏和顯示

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