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。这实际上发生了，但在预加载器模板中，即使调用了fullscreen方法并且showConsole设置为style.done，我也只会看到true类。

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

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

2 个答案: