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

Question

我最近开始玩 Angular2，遇到了一个非常基本的问题。

我正在尝试创建一个简单的 parent 组件，它只是一个动态框的容器。每个盒子都有自己的属性和数据。

我目前所做的如下：

容器class:

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>

** main-box 代表每个单独的框

MainBox class:

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

您需要将数据显式传递给 children:

<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 嵌套组件变量

Angular2 nested components variables not accessible in template

typescript

ionic2

angular