將值傳遞給子組件Angular2

Question

我正在嘗試將值從父組件傳遞到子組件，我對此進行了嘗試：

這是我的父組件：

import {Component, View, NgFor} from 'angular2/angular2';

import {DisplayCard} from '../display-card/display-card';

@Component({
  selector: 'display'
})
@View({
  templateUrl: './components/display/display.html',
  directives: [DisplayCard, NgFor]
})
export class Display {
  displays: Array<any>;

  constructor(){
    this.displays = [
      {name: "Lobby", appName: "Animal App", Source: 3},
      {name: "Wall", appName: "Idk App", Source: 3},
      {name: "Other Wall", appName: "Monkey App", Source: 3},
      {name: "Lobby Kiosk", appName: "Car App", Source: 3},
      {name: "Another Brick in the Wall", appName: "Pink Floyd App", Source: 3},
    ]
  }
}

父組件HTML：

<div class="col-md-3" *ng-for="#display of displays">
    <display-card name="{{display.name}}"></display-card>
</div>

子組件：

import {Component, View} from 'angular2/angular2';

@Component({
  selector: 'display-card'
})

@View({
  templateUrl: './components/display-card/display-card.html'
})

export class DisplayCard{
  name: string;
}

子HTML：

<div class="display-card">
    <div class="display-card-header">

    </div>
  <div class="display-card-body">
    <h1 class="display-card-title">{{name}}</h1>
    <h4 class="display-card-subtitle"></h4>
  </div>
</div>

我將name屬性添加到子組件中，因為這是我嘗試時遇到的錯誤：

EXCEPTION: Can't bind to 'name' since it isn't a known property of the '<display-card>' element and there are no matching directives with a corresponding property

使用組件甚至有可能嗎？

Answer 1

您需要在Component聲明中指定properties ：

@Component({
  selector: 'display-card',
  properties: ['name']
})