Question

我正在ActionCable尝试使用Angular。我在Rails上创建了一个快速Heroku应用程序，然后使用Angular npm模块创建了一个actioncable应用程序作为依赖项。

我配置了Rails appplication以允许http://localhost:4200作为原点，同时我正在开发我的Angular应用。我也没有把它变成API应用程序，因为我希望从一开始就有一个可用的UI。所以我可以登录Rails应用程序，发送消息，我的单独Angular应用程序也订阅了该频道。我已成功收到这些通知/消息。

现在我想基于该消息在Angular中渲染一些东西。我想我在这里遗漏了一些非常愚蠢的东西，但是我不能在组件中引用在订阅的receive回调中实例化该频道订阅的方法。

import {
  ComponentFactoryResolver,
  ComponentRef,
  OnInit,
  ViewContainerRef,
  Component,
  ViewChild,
  Output
} from '@angular/core';
import * as ActionCable from 'actioncable';
import { MessageComponent } from 'app/message/message.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  messageRef: ComponentRef<MessageComponent>;
  @ViewChild('message', { read: ViewContainerRef }) message: ViewContainerRef;

  title = 'app works!';
  private cable: ActionCable.Cable;
  private subscription: ActionCable.Channel;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef) {
  }

  public ngOnInit(): void {
    this.cable = ActionCable.createConsumer('wss://<my-heroku-app>.herokuapp.com/cable');
    this.subscription = this.cable.subscriptions.create(
      'RoomChannel',
      {
         connected: this.connected,
         disconnected: this.disconnected,
         received: this.received,
      });
   }

  private showMessage(messageString) {
    if (!this.messageRef) {
      const messageComponent = this.componentFactoryResolver.resolveComponentFactory(MessageComponent);
      this.messageRef = this.message.createComponent(messageComponent);
    }
    this.messageRef.instance.message = messageString;
    this.messageRef.changeDetectorRef.detectChanges();
  }

  private connected() {
    console.log('connected!');
  }

  private disconnected() {
    console.log('disconnected!');
  }

  private received(data: any) {
    console.log('received');
    // What do I put here? `this` is of type Subscription, 
    // and thus, I can't call `this.showMessage(data.message)`
  }
}

我想使用某种谓词或在该上下文中注入一些东西（对不起，如果我没有使用正确的术语），但我不知道该怎么做。我计划在AppComponent班级进行清理而不是全部，但现在我只是想学习。

有什么想法吗？谢谢！

Answer 1

答案似乎是这样的：

$('.has-children ul').click(function(e){
e.stopPropagation();
var el = (event.target || event.srcElement);
console.log('clicked');
$(this).find('ul.submenu').slideToggle();
 $(this).parent().find('span').toggleClass('arrow-down arrow-up');
});

收到通知时组件中的Angular ActionCable调用方法

1 个答案: