Angular 2 RC5 ngStyle数据不会从父组件传播

Question

I have the following simplest Angular 2 application: app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <h1>Test</h1>
        <test-component [Height] = "300" [Width]="300"></test-component>`
})
export class AppComponent {

    public constructor() {}
}

and the actual test component:

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'test-component',
    template: `
    <div [ngStyle]="{'height' : Height + 'px', 'width' : Width + 'px'}"></div>
    `
})
export class TestComponent implements OnInit {
    @Input() Height : any;
    @Input() Width : any;

    constructor() { }

    ngOnInit() { }

}

However, the ngStyle data does not propagate to the test component. Am I doing something wrong or this got broken in RC5?

Thanks

Answer 1

You haven't declared TestComponent as a directive.

You must declare it as a directive in AppComponent in order to work. Your code should look like this in AppComponent class:

import { Component } from "@angular/core";
import {TestComponent} from "./test.component";

@Component({
  selector: "app",
  directives: [TestComponent],
  template: `<div>{{message}}</div>
  <test-component [Height] = "500" [Width]="300"></test-component>`
})
export class AppComponent {
  public constructor() {}
}

Pass the TestComponent in directives property of the Component decorator.

Working plunk here .

Update

As @JB Nizet correctly pointed out, declaring directives in the component level is marked for deprecation and will be removed from the 2.0.0-final version, in order to favor the use of NgModules as a place to declare your directives. You can refer to the Angular2 Blog to get more info on that.

In a new and updated plunk, I have updated the code, so you declare your directive on NgModule .

NgModule :

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import {TestComponent} from "./test.component";

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, TestComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Component :

import { Component } from "@angular/core";

@Component({
  selector: "app",
  template: `<div>{{message}}</div>
  <test-component [Height] = "500" [Width]="300"></test-component>`
})
export class AppComponent {

}