Angular 2從父級更新子級組件的類列表

Question

我是Angular 2的新手，在以下問題上我需要一些幫助。 我有一個父級和一個嵌套的子級組件：

// The Parent:
import { Component, ViewChild } from 'angular2/core';
import {Preloader} from 'components/preloader/preloader';


@Component({
  selector: 'console',
  providers: [Preloader],
  directives: [Preloader],
  templateUrl: 'components/console/console.html'
})


export class Console {
  @ViewChild(Preloader) preloader: Preloader;

  constructor(preloader: Preloader) {
    this.preloader = preloader;
  }

  ngAfterViewInit() {
    this.preloader.showConsole();
  }
}


// ...and the Child
import {Component} from 'angular2/core';


@Component({
  selector: 'preloader',
  template: `
    <div [ngClass]="style"></div>
  `
})


export class Preloader {
  constructor() {
    this.style = {
      fullscreen: true,
      done: false
    };
  }

  showConsole() {
    // this is not working:
    this.style.done = true;
  }
}

當父組件完全裝入時，我想將style對象中的兩個變量都設置為true 。 確實發生了這種情況，但是在Preloader的模板中，即使調用showConsole方法並將style.done設置為true我也只能看到fullscreen類。

console.html模板如下所示：

<div class="main-window">
  <preloader></preloader>
</div>

Answer 1

我剛剛測試過，您的解決方案可以正常工作。

但是，如果您仍然說fullscreen課程保持不變，則可以考慮以下解決方案，

ngAfterViewInit() {
    setTimeout(()=>{
        this.preloader.showConsole();
    },0)        
 }

showConsole() {
    this.style.fullscreen = false;   //<<<===added.
    this.style.done = true;
 }

Answer 2

我知道了！ 問題出在兩個組件之間的通信中。 首先，這是我應該如何傳遞模板中的數據：

<div class="main-window">
  <preloader [start]='showConsole'></preloader>
</div>

但是，最重要的是，它還需要在子@Component中指定輸入變量，如下所示：

@Component({
  inputs:   ['start'],
  selector: 'preloader',
  template: `<div [ngClass]="style"></div>`
})