时间戳

首页 > 解决方案 > 输出指令 - 按上下文绑定

angular - 输出指令 - 按上下文绑定

问题描述

我想使用@Output()，但在这样的非标准场景中，我不能使用角度语法(somethingChanged)="console.log($event)"，但我必须通过绑定到上下文来做到这一点：

<nb-icon
   [nbPopover]="messagesComponent"
   [nbPopoverContext]="{ messages: downloadedMessages, onLoadMoreMessages: ??????}"
   >
</nb-icon>

所以我的子组件看起来像：

export class MessagesComponent {
    @Input() messages: Message[];
    @Output() onLoadMoreMessages = new EventEmitter<Message[]>();
    
    someMethod() {
       ...
       this.onLoadMoreMessages.emit(...);
    }
}

我将如何做到这一点？

标签： angularnebular

解决方案

您可以将任何内容作为输入传递，例如整个父组件......虽然这有点奇怪，所以传递一些包装器（例如在角度材料中使用类似的方法：FormControl 被传递给输入）：

class MyWrapper {
  subject = new Subject();
  emit() {
    this.subject.next();
  }
}

在父母中：

this.onLoadHandler = new MyWrapper();
this.onLodaHandler.subject.subscribe(() => ...)

<nb-icon
   [nbPopover]="messagesComponent"
   [nbPopoverContext]="{ messages: downloadedMessages, onLoadHandler: onLoadHandler}"
   >
</nb-icon>

在孩子中，你有：

someMethod() {
   ...
   this.onLoadHandler.emit(...);
}

推荐阅读