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 s。

@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>

更改父容器组件中的子项

1 个答案: