如何正确更改父级的子级组件？

Question

我具有以下构造的嵌套组件：

app.parent.component > app.container.component > app.containeritem.component 

例如：

app.parent.component

import ...
@Component({
    selector:'parent',
    template: '<container></container>,
    ....
})

app.container.component

import ...
@Component({
    selector: 'container',
    template: '<containeritem></containeritem>',
    ...
})

app.containeritem.component

import ...
  @Component({
        selector: 'containeritem',
        template: `<ul><li draggable="true"(dragend)="update.emit($event)">lorem</li></ul>`
        ...
    })

在app.child.component内部，我发出拖动动作。 那么，如何才能正确获取app.parent.component中的app.containeritem.component的动作数据？

Answer 1

您只需将事件与Output和EventEmitter ：

app.parent.component

import ...
@Component({
    selector:'parent',
    template: '<container (onDrag)="doSomething($event)"></container>,
    ....
})
export class ParentComponent {
    doSomething(event) {
        console.log(event);
    }
}

app.container.component

import ...
@Component({
    selector: 'container',
    template: '<containeritem (onDrag)="onDrag.emit($event)"></containeritem>',
    ...
})
export class ContainerComponent {
    @Output onDrag: EventEmitter = new EventEmitter();
}

app.containeritem.component

import ...
@Component({
    selector: 'containeritem',
    template: `<ul><li draggable="true"(dragend)="onDrag.emit($event)">lorem</li></ul>`
    ...
})
export class ContainerItemComponent {
    @Output onDrag: EventEmitter = new EventEmitter();
}