Question

我经常遇到这样的情况：我想要一个呈现给DOM元素的组件，并且需要一些数据。这些数据来自我存储在父组件中的对象，如：

@Component({
    template: '<child *ngFor="let child of children" [child]="child"/>'
})
export class ParentComponent {
    children: Array<Child>;

    constructor () {
        this.children = [
            new Child('Foo'),
            new Child('Bar'),
        ]
    }
}

class Child {
    name: string;

    constructor (name) {
        this.name = name;
    }
}

@Component({
    selector: 'child',
    template: 'My name is {{child.name}}'
})
export class ChildComponent {
    @Input child: Child;
}

这里，Child和ChildComponent代表同一个实体。但是尽管我必须为每个实体实例使用两个类和两个实例，我必须将一个对象传递给'wrap'组件类。这似乎对我来说不必要的复杂。

如果我能以某种方式“合并”类Child和ChildComponent（假想语法），我会发现它更容易：

@Component({
    template: '<child *ngFor="let this of children"/>'
})
export class ParentComponent {
    children: Array<MergedChildComponent>;

    constructor () {
        this.children = [
            new MergedChildComponent('Foo'),
            new MergedChildComponent('Bar'),
        ]
    }
}

@Component({
    selector: 'child',
    template: 'My name is {{name}}'
})
export class MergedChildComponent {
    name: string;

    constructor (name: string) {
        this.name = name;
    }
}

有没有办法实现这个目标？

Angular2：组件类和底层类

0 个答案: