javascript中的Angular2递归模板

Question

我一直在尝试按照本教程创建嵌套树视图。 当我尝试在使用Angular2的javascript中做类似的事情时，该教程是打字稿。

在typescript代码中，树视图组件如下所示：

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：组件'function（）{'视图上的意外指令值'undefined'

我相信这是因为我在完全定义TreeView之前调用指令：[TreeView]。 如果我删除该指令行，则错误消失。 但是，我不知道为什么它会在打字稿中起作用而不是javascript如果打字稿只是编译成javascript。 这是打字稿代码中编译的javascript。 我不确定我错过了什么。 任何帮助将非常感激。

Answer 1

这个问题已经回答了几次

首先，课程没有悬挂。 引自MDN

函数声明和类声明之间的一个重要区别是函数声明被提升而类声明不被提升。 您首先需要声明您的类，然后访问它[...]

forwardRef的文档说

例如，当我们需要为DI目的引用的令牌被声明但尚未定义时，使用forwardRef。 当我们尚未定义创建查询时使用的令牌时，也会使用它。

所以就像在代码中添加forwardRef一样简单

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

您可以阅读有关此主题的更多信息

• Angular 2中的前向引用
• 其他来自StackOverflow的问题