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>`
})