как два компонента могут ссылаться друг на друга

У меня есть два компонента в angular 2. ContainerOne и ContainerTwo.

ContainerOne ссылается на ContainerTwo, а ContinerTwo ссылается на ContainerOne в наших директивах:[]

Ошибка:

Uncaught (в обещании): неожиданное значение директивы «undefined» в представлении компонента «ContainerTwo»

Первый класс:

import {Component, Input} from 'angular2/core';
import {ContainerTwo} from './container-two';

@Component({
  selector: 'container-one'
, template: '
<div *ngIf="level > 0" 
    style="width: {{level * 20}}px; 
    height: {{level * 20}}px; 
    background-color: red;">

  <container-two [level]="level - 1"></container-two>

</div>'
, directives: [ContainerTwo]
})
export class ContainerOne {

    @Input() level: number;

    constructor() {
    }
}

Второй класс:

import {Component, Input} from 'angular2/core';
import {ContainerOne} from './container-one';

@Component({
  selector: 'container-two'
, template: '
<div *ngIf="level > 0" 
  style="width: {{level * 20}}px; 
  height: {{level * 20}}px; 
  background-color: blue;">

    <container-one [level]="level - 1"></container-one>

</div>'
, directives: [ContainerOne]
})
export class ContainerTwo {

    @Input() level: number;

    constructor() {
    }
}

app.ts:

import { Component } from 'angular2/core';
import {ContainerOne} from './container-one';
import {ContainerTwo} from './container-two';

@Component({
  selector: 'app'
, template: '<container-one [level]="10"></container-one>'
, directives: [ContainerOne, ContainerTwo]
})
export class App {

    constructor() {
    }
}

(это скелет моей проблемы, настоящие контейнеры сложнее и не похожи) этот образец программы хочет нарисовать несколько div друг в друге, пока уровень > 0

В чем проблема? Может, опорный кружок? Есть идеи?


angular angular2-directives angular2-template
person CsKovari    schedule 20.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Да, эталонный цикл. Каждый файл *.ts является модулем (в большинстве случаев), но модули загружаются один за другим, а циклические зависимости не обрабатываются автоматически. Вы должны использовать forwardRef, чтобы разорвать этот цикл, проверьте это ссылка.

person kemsky    schedule 20.04.2016
comment
это была интересная статья, спасибо. Я вставил в свой код это: директивы: [@Inject(forwardRef(() => ContainerOne], но не работает - person CsKovari; 21.04.2016
comment
ошибки нет. Он не распознает директиву, поэтому не может генерировать ошибку. - person CsKovari; 21.04.2016
comment
удалите Comp2 из директив приложения и добавьте прямые ссылки в директивы Comp1 и Comp2. - person kemsky; 21.04.2016
comment
Это не работает, и я вас не понимаю. Директивы должны содержать Comp1 и Comp2 для обработки шаблона... Если я удалю ContainerOne из поставщиков ContainerTwo, программа запустится, но только до первого уровня, цепочка будет остановлена ​​на Comp2 - person CsKovari; 21.04.2016