Angular2 thành phần đệ quy

Question

Tôi cố gắng để triển khai các thành phần đệ quy như đã thảo luận trong các bài viết và plnkr:

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

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

Angular2 Recursive Templates in javascript

Tuy nhiên, các giải pháp cung cấp chỉ đối phó với các thành phần đối tượng tự và không giải quyết vấn đề của các thẻ HTML mà các thành phần được cho là sẽ khởi tạo.

Làm cách nào để thành phần con sử dụng thẻ <parent> ... </parent> html bên trong mẫu của nó?

Tôi sẽ rất biết ơn sự giúp đỡ và có lẽ là một plunkr/fiddle mà bạn có thể cung cấp.

Answer 1

Các kết quả mong muốn là không thể bằng cách sử dụng chỉ mẫu vì những nguyên nhân phụ thuộc vòng tròn:

EXCEPTION: Giá trị chỉ thị không mong muốn 'undefined' trên nhìn ra thành phần 'ChildComponent'

như bạn có thể thấy trên this Plunker là dấu hiệu cho thấy có sự cố xảy ra (vấn đề chung DI không phải là góc cạnh).

ParentComponent phụ thuộc vào con:

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 phụ thuộc vào cha mẹ mà làm cho phụ thuộc vòng tròn:

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() {} 
} 

Tuy nhiên bạn có thể đạt được điều này bằng cách sử dụng DynamicComponentLoader như bạn có thể nhìn thấy trong example này nhưng hãy nhớ để cung cấp một số loại điều kiện để dừng hiển thị thành phần vô tận. Trong ví dụ của tôi, điều kiện là thông số đầu vào trong thành phần chính:

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; 
}