将值传递给 child 组件 Angular2

Question

我正在尝试将值从 parent 组件传递到 child 组件我试过这个：

这是我的 parent 组件：

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},
    ]
  }
}

Parent 组件 HTML:

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

Child 分量：

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

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

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

export class DisplayCard{
  name: string;
}

Child 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 属性添加到 child 组件，因为这是我在尝试此操作时遇到的错误：

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

您需要在组件声明中指定 properties：

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

将值传递给 child 组件 Angular2

Passing a value to a child component Angular2

web-component

angular