Question

我正在尝试部署递归组件，如这些帖子和plnkr中讨论的那样：

How do I inject a parent component into a child component?

> `http://plnkr.co/edit/l7jsV0k7DbGJGXPFlSPr?p=preview`

Angular2 Recursive Templates in javascript

但是，提供的解决方案只处理组件对象本身，并没有解决组件应该实例化的HTML标记的问题。

子组件如何在其模板中使用<parent> ... </parent> html标记？

我会非常感谢您提供的帮助，也许是您可以提供的傻瓜/小提琴。

Answer 1

仅使用模板无法实现所需的结果，因为循环依赖性导致：

异常：意外的指令值＆＃39; undefined＆＃39;在组件的视图＆＃39; ChildComponent＆＃39;

正如您在this Plunker上看到的那样，这表明出现了问题（一般DI问题不是Angular问题）。

ParentComponent依赖于child：

import {Component} from 'angular2/core';
import {AppComponent} from './app.component';
import {ChildComponent} from './child.component'

@Component({
  selector: 'parent',
  template: `<p>parent</p>
  <child></child>`,
  directives: [ChildComponent]
})
export class ParentComponent {
  constructor() {}
}

ChildComponent依赖于父，它导致循环依赖：

import {Component} from 'angular2/core';
import {AppComponent} from './app.component';
import {ParentComponent} from './parent.component';

@Component({
  selector: 'child',
  template: `<p>child</p>
  <parent></parent>`,
  directives: [ParentComponent]
})
export class ChildComponent {
  constructor() {}
}

但是你可以通过使用DynamicComponentLoader实现这一点，正如你在example中看到的那样，但是请记住提供某种条件来阻止无限组件渲染。在我的示例中，条件是父组件中的输入参数：

import {Component, Input} from 'angular2/core';
import {AppComponent} from './app.component';
import {ChildComponent} from './child.component'

@Component({
   selector: 'parent',
   template: `<p>parent</p>
   <child *ngIf="condition"></child>`,
   directives: [ChildComponent]
})
export class ParentComponent {
  constructor() {
  }

  @Input() condition: bool;
}

Angular2递归组件

1 个答案: