从组件调用指令的方法 - Angular 9

Question

我正在尝试在 Angular 9 PWA 中构建一个聊天组件。现在我想知道如何在聊天中显示新消息时实现“自动滚动到底部”功能window。

为此，我创建了自定义 ScrollToBottom 指令 并将其应用于聊天 DIV 容器。

<div class="msg_history" scrollToBottom>
   <li class="message" *ngFor="let message of messages | async">

在这个指令中，我有一个名为 scrollToBottom 的方法。

public scrollToBottom() {
    const el: HTMLDivElement = this._el.nativeElement;
    setTimeout(() => el.scrollTop = Math.max(0, el.scrollHeight - el.offsetHeight));
  }

现在，我的问题是，是否有可能（以及如何？）在对话主题收到新消息后从聊天组件调用指令的方法。

//In component
this.chatService.conversation.subscribe(() => DIRECTIVE.scrollToBottom());

或者省略聊天组件并直接在指令中注入聊天服务以处理会话主题更改的更好方法？

@Directive({
  selector: '[scrollToBottom]'
})
export class ScrollToBottomDirective {
  constructor(private _el: ElementRef, private chat: ChatService) { }

  public ngAfterViewInit() {
    this.chat.conversation.subscribe(() => this.scrollToBottom());
  }

  public scrollToBottom() {
    const el: HTMLDivElement = this._el.nativeElement;
    setTimeout(() => el.scrollTop = Math.max(0, el.scrollHeight - el.offsetHeight));
  }
}

谢谢转发;-)

Answer 1

是的，在聊天组件内，您可以利用 ViewChild 装饰器来获取对当前组件内 components\directives 的引用

@ViewChild(ScrollToBottomDirective) child: ScrollToBottomDirective;

//In component
this.chatService.conversation.subscribe(() => this.child.scrollToBottom());

从组件调用指令的方法 - Angular 9

Call directive's method from component - Angular 9

chat

angular-directive

angular