Переменные вложенных компонентов Angular2 недоступны в шаблоне

Недавно я начал играть с 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>

** main-box обозначает каждую отдельную коробку

Класс 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>

Я прекрасно вижу заголовок, но мне этого недостаточно, так как я хочу полностью разделить файлы шаблонов.

Спасибо!


typescript angular ionic2
person MorKadosh    schedule 24.07.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вам нужно явно передать данные детям:

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

export class MainBox {
  @Input()title:any;
  constructor() {
  }
}
person Günter Zöchbauer    schedule 24.07.2016
comment
Значит, я должен делать это для каждого атрибута? есть ли лучшая практика для достижения моих целей? - person MorKadosh; 24.07.2016
comment
Вы можете передать box в шаблон вместо box.title, а затем использовать {{box.title}} или {{box?.title}} в шаблоне блока вместо {{title}}. - person Günter Zöchbauer; 24.07.2016
comment
Спасибо, но я был бы очень признателен за пример :) - person MorKadosh; 24.07.2016
comment
Если у вас есть несколько атрибутов и дочернее дерево на несколько уровней в глубину, вы можете захотеть иметь свои данные в службе. @Input отлично работает для дочерних компонентов, но быстро разваливается, если у вас их больше. - person Derek Kite; 24.07.2016

arrow_upward
0
arrow_downward

Вы можете получить доступ к заголовку в основном поле только в том случае, если вы предоставите заголовок в качестве входных данных для него.

   <div *ngFor="let box of boxes">
             <main-box [title]="box.title"></main-box>
   </div>
person Piyush.kapoor    schedule 24.07.2016
comment
Нет необходимости перемещать *ngFor в родительский элемент. Заголовок должен быть входом для работы [title]="box.title" (см. мой ответ). - person Günter Zöchbauer; 24.07.2016
comment
да, я только что проверил, ngfor будет работать и в основном окне, спасибо - person Piyush.kapoor; 24.07.2016