时间戳

首页 > 解决方案 > 带有 Angular 10 的 Roslib

angular - 带有 Angular 10 的 Roslib

问题描述

我正在尝试在 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 中进行设置？

谢谢

标签： angulartypescriptnpm

解决方案

所以在这里你问两个问题（我会回答这两个问题）。

第一个问题：如何使用roslibjs？第二个问题如何将资源（如 roslibjs 连接）共享到 Angular 应用程序中的多个组件？我先回答第二个问题：

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

Angular 的基本概念之一是“服务”的概念，它与依赖注入的概念紧密耦合。所以请阅读角度文档的这一部分来理解。

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

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

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

安装 ：

使用经典

npm -i roslib
npm -D @types/roslib

然后将 roslib 添加到 angular.json 文件的 allowedCommonJsDependencies 中。

 "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 在主题的构造函数中执行的）。

然后，您可以编写一个简单的角度组件来显示您的“/聊天”主题，如下所示：

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 之间存在不兼容问题。看到这个问题就明白了。

推荐阅读