Typescript Angular2组件树

从第一个alpha开始，我就一直在使用Angular 2，但我在从组件创建可遍历树方面遇到了困难

我有单独的组件配置和设置数据源，这些数据源是持久化的，并且还会对相关组件的一些事件作出反应。该源是由视图中的角度组件表示的树。树节点与角度组件树完全匹配

组件继承自同一抽象类BaseComponent。组件可以包含任意数量的BaseComponent子实例，因此它不知道父/子实例的确切类型

我希望避免通过组件输入指定某种键

有没有办法使用基类型获取父级

TL；DR：我需要在不知道确切类型的情况下构建以下组件的父/子树

export abstract class BaseComponent {
    public children: Array<BaseComponent>;

    constructor(
         //I need something like this but it's not working for ancestor classes
         @Inject(forwardRef(() => BaseComponent))
         private _parent: BaseComponent)
    {
         _parent.children.push(this);
    }
}

@Component({...})
export class A extends BaseComponent {...}

@Component({...})
export class B extends BaseComponent {...}

@Component({...})
export class C extends BaseComponent {...}

@Component({...})
export class D extends BaseComponent {...}

导出抽象类BaseComponent{
公共儿童：阵列；
建造师(
//我需要这样的东西，但它不适用于祖先类
@注入（forwardRef（（）=>BaseComponent））
private（父级：BaseComponent）
{
_家长。孩子。推（这个）；
}
}
@组件（{…}）
导出类A扩展BaseComponent{…}
@组件（{…}）
导出类B扩展BaseComponent{…}
@组件（{…}）
导出类C扩展BaseComponent{…}
@组件（{…}）
导出类D扩展BaseComponent{…}

我很确定没有办法做你想做的事。
Angulars DI不支持按基类型注入

另一种方法是将所有这些类型组合到一个组件中，并使用例如

ngSwitch

来选择视图的不同部分，该部分应根据用于在具体节点类型之间切换的某个指示器显示

---

我很确定没有办法做你想做的事。
Angulars DI不支持按基类型注入

另一种方法是将所有这些类型组合到一个组件中，并使用例如

ngSwitch

来选择视图的不同部分，该部分应根据用于在具体节点类型之间切换的某个指示器显示

---

在beta.17中，有一种解决方法，使用ElementInjector作为喷射器自动喷射到部件中，请参见下面的代码：

constructor(injector: Injector){
    var parent = injector._view.context;
}

---

在beta.17中，有一种使用ElementInjector的解决方法，ElementInjector作为喷油器自动注入部件，请参见下面的代码：

constructor(injector: Injector){
    var parent = injector._view.context;
}

---

不久前我做了一个简单的树组件

• 树节点.ts

  相当于您的基类

• tree node.com.ts

  是一个演示组件。它使用递归模板来显示树

普朗克：

tree-node.com.ts

从'@angular/core'导入{Component，OnInit，Input}；
从“./树节点”导入{TreeNode}；
@组成部分({
选择器：“树节点com”，
模板：`
{{title}}
{{tree.e}}（{{tree.size（）}}）


`
})
导出类TreeNodeCom实现OnInit{
标题：字符串='树-树结构'；
@输入（）树；
root:boolean=false；
构造函数（）{}
恩戈尼尼特（）{
如果（！this.tree）{
this.root=true；
this.tree=新树节点（'/'）；
this.initTree（）；
}
this.tree.log（）；
}
initTree（）{
//创建2级节点
for（设i=0；i<5；i++）{
设n=this.tree.add（`${i}`）；
for（设j=0；j<5；j++）{
n、 加（j）；
}
}
}
}

我刚才做了一个简单的树组件

• 树节点.ts

  相当于您的基类

• tree node.com.ts

  是一个演示组件。它使用递归模板来显示树

普朗克：

tree-node.com.ts

从'@angular/core'导入{Component，OnInit，Input}；
从“./树节点”导入{TreeNode}；
@组成部分({
选择器：“树节点com”，
模板：`
{{title}}
{{tree.e}}（{{tree.size（）}}）


`
})
导出类TreeNodeCom实现OnInit{
标题：字符串='树-树结构'；
@输入（）树；
root:boolean=false；
构造函数（）{}
恩戈尼尼特（）{
如果（！this.tree）{
this.root=true；
this.tree=新树节点（'/'）；
this.initTree（）；
}
this.tree.log（）；
}
initTree（）{
//创建2级节点
for（设i=0；i<5；i++）{
设n=this.tree.add（`${i}`）；
for（设j=0；j<5；j++）{
n、 加（j）；
}
}
}
}

如何创建树？您是使用

*ngFor

为模型中的数据呈现项，还是像

一样由DOM树创建的项？它们是由DOM树创建的，*ngFor在内部的一些组件中使用。因此，使用

投影子项？如何创建树？您是使用

*ngFor

为模型中的数据呈现项，还是像

一样由DOM树创建的项？它们是由DOM树创建的，*ngFor在一些组件内部使用。因此子组件使用

进行投影？感谢您的想法，但有许多组件继承自基本类型，因此在多个位置使用一个大开关不是一个选项。另一个选项是使用DynamicComponentLoader，如混凝土类型所在位置所示根据某些值添加到DOM中。这是一个有效的选项，不幸的是，这意味着我必须手动创建和销毁子组件（更不用说更改检测），如果可能的话，我希望避免这种情况。我不确定这是什么意思。

dcl包装器

组件可以为您完成这项工作。很抱歉，我错过了onchanges方法，但是这仍然不能管理加载组件的输入和输出感谢这个想法，但是有许多组件继承自基类型，因此在多个位置使用一个大开关不是一个选项，另一个选项是使用DynamicComponentLoader，如具体类型