Angular2 Рекурсивные шаблоны в javascript

Question

Я пытаюсь следовать this tutorial, чтобы создать вложенное древовидное представление. Учебник находится в машинописном тексте, в то время как я пытаюсь сделать аналогичную вещь в javascript с помощью Angular2.

В коде машинопись, древовидный вид компонент выглядит так:

import {Component, Input} from 'angular2/core'; 
import {Directory} from './directory'; 
@Component({ 
    selector: 'tree-view', 
    templateUrl: './components/tree-view/tree-view.html', 
    directives: [TreeView] 
}) 
export class TreeView { 
    @Input() directories: Array<Directory>; 
} 

В JavaScript, который должен преобразовать в:

TreeView = ng.core 
    .Component({ 
    selector: 'tree-view', 
    templateUrl: './components/tree-view/tree-view.html', 
    directives: [TreeView], 
    inputs: ['directory'], 
    }) 
    .Class({ 
    constructor: function() { 
    }, 
    }); 

Однако, JavaScript выдает следующее сообщение об ошибке:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'function() {'

Я считаю, что это потому, что я вызываю директивы: [TreeView] перед TreeView имеет b een полностью определен. Если я удалю эту директивную строку, ошибка исчезнет. Тем не менее, я не знаю, почему он работал бы в машинописном, а не в javascript, если машинопись просто компилируется в javascript. This is the compiled javascript from the typescript code. Я не уверен, что мне не хватает. Любая помощь будет оценена по достоинству.

Answer 1

Этот вопрос был дан ответ несколько раз

Прежде всего классов не водрузили. Цитируя MDN

An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not. You first need to declare your class and then access it [...]

Документация forwardRef говорит

For instance, forwardRef is used when the token which we need to refer to for the purposes of DI is declared, but not yet defined. It is also used when the token which we use when creating a query is not yet defined.

Так что это так же просто, как добавление forwardRef в код

directives : [ng.core.forwardRef(function() { return TreeView; })] 

Вы можете прочитать больше об этой теме

• Forward references in Angular 2
• Другие questions из StackOverflow