Angular 2 ng-content从子组件接收事件

发布时间：2020-12-17 17:51:36 所属栏目：安全来源：网络整理

导读：我正在构建一个包含多个动态面板的页面,每个子面板都具有相同的 HTML,因此我创建了一个父面板组件来包装每个面板组件. 问题是我想从孩子向小组发送一个事件,但我似乎无法找到答案.这是我到目前为止所拥有的： // Panel Panel Component@Component({ selector

我正在构建一个包含多个动态面板的页面,每个子面板都具有相同的 HTML,因此我创建了一个父面板组件来包装每个面板组件.

问题是我想从孩子向小组发送一个事件,但我似乎无法找到答案.这是我到目前为止所拥有的：

// Panel Panel Component
@Component({
    selector: 'panel',template: `
    <div (emittedEvent)="func($event)">
        <ng-content></ng-content>
    </div>
    `
})
export class PanelComponent {

    constructor() {}

    func(event) {
    // Do stuff with the event
    }
}
// Child Panel Component (one of many)
@Component({
selector: 'child-panel-one',template: `
    // Template stuff
    <button (click)="emitEvent()">Click</button>
`
})
export class ChildPanelOne {
emittedValue: Boolean = false;

@Output() emittedEvent = new EventEmitter();

constructor() {}

private emitEvent() {
    this.emittedValue = true;

    this.emittedEvent.emit(this.emittedValue)
}
}
//
// Main Parent Template
<panel>
    <child-panel-one></child-panel-one>
</panel>

我可以创建一个共享服务,但是将布尔值从子节点传递给父节点似乎太过分了.

有任何想法吗？

谢谢

解决方法

有几种方法

<panel #p>
    <child-panel-one (emittedEvent)="p.func($event)"></child-panel-one>
</panel>

但是这需要< panel>的用户设置事件绑定

或者你可以像in Angular2 how to know when ANY form input field lost focus中所示的DOM事件

或者您可以使用’@ ContentChildren()`然后命令性地订阅

@ContentChildren(ChildPanelOne) childPanels:QueryList<ChildPanelOne>

ngAfterContentInit() {
  this.childPanels.toArray().forEach(cp => cp.emittedValue.subscribe(() => ...));
}

但这要求所有子面板都是预定义类型.

您还可以使用具有可观察的共享服务,子组件注入并用于向父组件发出事件.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!