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

Я пытался следовать этому руководству, чтобы создать вложенное древовидное представление. Учебное пособие написано на машинописном тексте, в то время как я пытаюсь сделать то же самое в 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 выдает следующую ошибку:

ИСКЛЮЧЕНИЕ: неожиданное значение директивы 'undefined' в представлении компонента 'function () {'

Я полагаю, что это потому, что я вызываю директивы: [TreeView] до того, как TreeView будет полностью определено. Если я удалю эту директивную строку, ошибка исчезнет. Тем не менее, я не знаю, почему это будет работать в машинописном тексте, а не в JavaScript, если машинописный текст просто компилируется в JavaScript. Это скомпилированный javascript из машинописного кода. Я не уверен, что мне не хватает. Любая помощь будет очень признательна.

Источник

1 ответ

Решение

На этот вопрос ответили несколько раз

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

Важным отличием между объявлениями функций и объявлениями классов является то, что объявления функций поднимаются, а объявления классов - нет. Сначала вам нужно объявить свой класс, а затем получить к нему доступ [...]

Документация для forwardRef гласит

Например, forwardRef используется, когда токен, на который мы должны ссылаться для целей DI, объявлен, но еще не определен. Он также используется, когда токен, который мы используем при создании запроса, еще не определен.

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

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

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

Источник
Другие вопросы по тегам