Question

我最近开始玩Angular2，并面临一个非常基本的问题。

我试图创建一个简单的父组件，它只是动态框的容器。每个方框都有自己的属性和数据。

到目前为止，我所做的事情如下：

容器类：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {IONIC_DIRECTIVES} from 'ionic-angular';
import {MainBox} from './../../component/main-box/main-box.component';

@Component({
  selector      :   'wrapper',
  templateUrl   :   'build/component/main-container/main-container.component.html',
  directives    :   [IONIC_DIRECTIVES, MainBox]
})

export class MainContainer {
  boxes : MainBox[] = [
    {title : "mor"},
    {title : "naama"}
  ];
  constructor() {

  }
}

容器模板

<div>
    <main-box *ngFor="let box of boxes"></main-box>
</div>

**主框代表每个单独的框

MainBox类：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({
  selector      :   'main-box',
  templateUrl   :   'build/component/main-box/main-box.component.html',
  directives    :   [IONIC_DIRECTIVES]
})

export class MainBox {
  title:any;
  constructor() {
  }
}

框模板

{{title}}

我希望Angular会自动显示正确的标题，但事实上它并没有显示任何内容。

另一方面，如果我执行以下操作：

<div *ngFor="let box of boxes">{{box.title}}</div>

我可以看到标题很好，但对我来说不够好，因为我希望完全分离模板文件。

谢谢！

Answer 1

您需要将数据明确传递给子级：

<div>
    <main-box *ngFor="let box of boxes" [title]="box.title"></main-box>
</div>

export class MainBox {
  @Input()title:any;
  constructor() {
  }
}

Answer 2

如果您提供标题作为输入

，则只能访问主框中的标题

   <div *ngFor="let box of boxes">
             <main-box [title]="box.title"></main-box>
   </div>

Angular2嵌套组件变量无法在模板中访问

2 个答案: