Angular 2从父级更新子级组件的类列表

Question

I'm new to Angular 2 and I need some help with the following issue. I have a parent and a nested, child component:

// 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;
  }
}

I'd like to set both variables in style object to true when the parent component is fully mounted. That actually happends, but in the Preloader's template I see only fullscreen class even after showConsole method was called and style.done was set to true .

console.html template is just like this:

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

Answer 1

I just tested and your solution is working without any problem.

But if you still say fullscreen class remains same then you can consider below solution,

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

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

Answer 2

I've figured it out! The problem was in the communication between two components. First of all this is how I should have pass the data in the template:

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

But, the most important thing, it also requires to specificate input variables in the child @Component like this:

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