在父容器組件改變周圍的孩子

Question

如果我早組件定義爲：

@Component({ 
    selector: 'parent', 
    template: ` 
     <div><ng-content></ng-content></div> 
    ` 
}) 
export class Parent { ... } 

@Component({ 
    selector: 'data', 
    template: ` 
     <ng-content></ng-content> 
    ` 
}) 
export class Data { ... }  

而一些標記，例如：

<parent> 
    <data>a</data> 
    <data>b</data> 
    <data>c</data> 
</parent> 

有沒有辦法通過parent's控制器進行重新排序，使得他們最終可能會呈現c, a, b（例如）？用javascript和*ngFor +一些| reorder-pipe這樣做很容易獲得一組數據項。但是我發現，如果我不能看到靜態聲明的數據項，那麼可維護性會受到很大的影響。

Answer 1

我找到了一種方法，當孩子被映射到<ng-content>，然後直接處理DOM元素來做到這一點。我寧願採取一種方法來處理ComponentRef或ViewRef。

@Component({ 
    selector: '[parent]', 
    template: ` 
     <div #parent><ng-content></ng-content></div> 
    ` 
}) 
export class Parent implements AfterViewInit { 
    @ContentChildren(Data) datas: QueryList<Data>; 
    @ViewChild('parent') parentDiv: any; 

    ngAfterViewInit() { 
     let el = this.parentDiv.nativeElement; 

     // Collect children, append sort prop, and clean. 
     let children = []; 
     let datas = this.datas.toArray(); 
     for (let i = 0; i < datas.length; ++i) { 
      children.push(el.removeChild(el.children[0])); 
      children[i].dataset.sort = datas[i].sort; 
     } 

     // Sort and re-add. 
     let sorted = children.sort(
      (x, y) => parseInt(x.dataset.sort) - parseInt(y.dataset.sort)); 
     for (let i of sorted) { 
      el.insertBefore(i, null); 
     } 
    } 
} 

@Directive({ 
    selector: '[data]' 
}) 
export class Data { 
    @Input() sort: number; 
} 

<div parent> 
    <div child sort="2">a</div> 
    <div child sort="3">b</div> 
    <div child sort="1">c</div> 
</div>