Question

我有以下最简单的Angular 2应用程序： 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() {}
}

和实际测试组件：

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() { }

}

但是，ngStyle数据不会传播到测试组件。我做错了什么或RC5坏了？

由于

Answer 1

您尚未将TestComponent声明为指令。

您必须在AppComponent中将其声明为指令才能发挥作用。您的代码应该在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() {}
}

将TestComponent传递给directives装饰器的Component属性。

工作插件here。

<强>更新

正如@JB Nizet正确指出的那样，声明组件级别的指令被标记为弃用，并将从2.0.0最终版本中删除，以便使用NgModules作为声明指令的地方。您可以参考Angular2 Blog获取更多信息。

在新的和更新的插件中，我更新了代码，因此您在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 {

}

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

1 个答案: