javascript 中的 Angular2 递归模板

Angular2 Recursive Templates in javascript

本文关键字：递归 Angular2 中的 javascript      更新时间：2023-09-26

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

在打字稿代码中，树视图组件如下所示：

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 会抛出以下错误：

异常：视图上的意外指令值"未定义" 组件 '函数 （） {'

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

这个问题

已经被回答了几次

首先，课程不是吊装的。引用自MDN

函数声明和类声明

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

转发文档说

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

因此，只需向代码添加forwardRef一样简单

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

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

  • 角度 2 中的前向引用
  • 来自StackOverflow的其他问题
相关文章：