angular - 带有 Angular 10 的 Roslib

Question

我正在尝试在 angular 10 中使用 roslibjs。我运行以下命令来安装 roslib 及其类型定义

npm i roslib
npm i @types/roslib --save-dev

我在文件顶部的 component.ts 文件中执行以下操作

import * as ROSLIB from 'roslib';

ros: any;
ex_publisher:any;

在构造函数中我调用它并且它有效

    this.ros = new ROSLIB.Ros({
      url : 'ws://localhost:9090'
    });

但我不知道如何订阅或发布主题

通常我会做类似的事情，但它对发布者一无所知

      this.ex_publisher = new ROSLIB.Topic({
      ros : this.ros,
      name : 'test/testname',
      messageType : 'std_msgs/String'
    });

    this.ros = new ROSLIB.Ros({
      url : 'ws://localhost:9090'
    });

    this.ros.on('connection', function() {
      console.log("connected to ROS");
      console.log("sending test message over ROS");      
      
      this.ex_publisher.data  = 'hello'; // error here doesn't know about data
      this.ex_publisher.publish(); // error here also
      
    });

引入 roslib 脚本的最佳方式是什么。另外，如果我想在所有组件之间共享 ros 连接，我应该如何在 Angular 10 中进行设置？

谢谢

Answer 1

所以在这里你问两个问题(我会回答两个问题)。

第一个问题:如何使用roslibjs？第二个问题如何在 Angular 应用程序中将资源(如 roslibjs 连接)共享到多个组件？让我先回答第二个问题:

如何在多个 Angular 组件之间共享一个资源，比如 roslibjs 连接？

angular 中的一个基本概念是“服务”的概念，它与依赖注入(inject)的概念紧密耦合。所以请阅读 this section Angular 文档的理解。

但是为了解释什么是服务，假设这是一个“Angular”将提供给所有需要它们的组件的类。

所以对我来说，最好的解决方案是创建一个 ROSLibService，它将提供给所有需要与 ROS 交互的组件。 (我稍后会展示一个示例)。

如何在 Angular 应用程序中使用 ROSLibJS？

安装:

使用经典

npm -i roslib
npm -D @types/roslib

然后在angular.json文件的allowedCommonJsDependencies中添加roslib

 "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ....
            "allowedCommonJsDependencies": ["roslib"]
          },

这是我用来在我的组件之间共享 ROSLib 的 Angular 服务示例。

import { Injectable } from '@angular/core';
import * as ROSLIB from 'roslib';
import { Subject, Observable } from 'rxjs';

// Here you define the type (as in your .msg, but in Typescript)
export interface String {
   data: string;
}

@Injectable({
  providedIn: 'root'
})
export class RoslibService {
  private _ros: ROSLIB.Ros;
  private _connected = new Subject<boolean>();
  private _chat = new Subject<String>();

  private _topic?: ROSLIB.Topic;

  constructor() {
    this._connected.next(false);

    this._ros = new ROSLIB.Ros({});
    this._ros.connect('ws://127.0.0.1:9090');
    this._ros.on('connection', (event: any) => {
      this._connected.next(true);
      this.subscribeToTopics();
    })
    // TODO : Manage the events "disconnect" and "error".
  }

  get connected(): Observable<boolean>{
    return this._connected.asObservable();
  }

  get chat(): Observable<String>{
    return this._chat.asObservable();
  }    

  private subscribeToTopics(){
    this._topic = new ROSLIB.Topic({ros: this._ros, name: '/chat', messageType: 'std_msgs/String'});
    this._topic.subscribe((msg: String)=>{ this._chat.next(msg);});        
  }
}

建立连接后创建主题非常重要(因为订阅是由 roslibjs 在主题的构造函数中执行的)。

然后，您可以编写一个简单的 Angular 组件来显示您的“/chat”主题，如下所示:

import { Component } from '@angular/core';
import { String, RoslibService } from './roslib.service';
    
@Component({
    selector: 'app-root',
    template: `
        <h1>Roslib JS tester</h1>
        <p>Connected : {{this.connected}}</p>
        <p>Message : {{this.message}}</p>`,
      styleUrls: [''],
    })
export class AppComponent {
    title = 'ng-roslib';
    
    connected = false;
    message = '';
    
    constructor(private roslibService: RoslibService) {
        this.roslibService.chat.subscribe((msg: String)=>{
          this.message = msg.data;
        });
        this.roslibService.connected.subscribe((connected: boolean)=>{
          this.connected = connected;
        });
    } 
}

注意:Angular 12 使用 Webpack 5，并且 roslibjs 和 webpack5 之间不兼容。参见 this issue理解。