在我的angular 2应用程序中了解“EXCEPTION：无法读取未定义的属性'url'的原因”re：socket.io [英] Understanding cause of “EXCEPTION: cannot read property 'url' of undefined” re: socket.io in my angular 2 app

问题描述

我试图了解在特定实例中产生EXCEPTION：无法读取属性'url'未定义错误的原因。我正在将socket.io导入到组件中，并在我的ngOnInit中发出，这也是正确导入的。我也引用了一个聊天服务，它也在构造函数中导入和实例化，并在根app.module中提供。问题与我的ngOnInit中引用的url有关。这就是我在组件中所拥有的：



从'@ angular / router'导入{Router};

import {AlertService}来自'./data/alert.service';

从'@ angular / core'导入{Component，ViewContainerRef，OnInit};

导入*作为来自'socket的io。 io-client';

import'。/ rxjs-operators';

import {API}来自./data/api.service;

从./data/search.service导入{Search};

从'./ui/chat/chat.service'导入{ChatService};



@Component（{

选择器：'app'，

templateUrl：'app / app.component.html'，
styleUrls：['app / app.component.css']

}）

导出类AppComponent实现OnInit

{

私人套接字;

private routeUrl;

私人网址：字符串;

公共tabOptions：string [] = ['typeA /'，'typeB /'];



public static get view（）：ViewContainerRef

{

返回AppComponent._view;

}



private static _view：ViewContainerRef;



构造函数（api：API，

搜索：搜索，

viewContainer：ViewContainerRef，

私有路由器：路由器，

私人聊天服务：ChatService）

{

AppComponent._view = viewContainer;

}



ngOnInit（）{

this.router.events .subscribe（（route）=> {

let routeUrl = route.url;

console.log（'用户路由更改为：'+ routeUrl）;

this。 chatService.trackUser（）;

}）;

}

}



此组件正在调用chat.service，特别是trackUser（）函数，如下所示：



从{./导入{ContextMenu} ../context-menu.component';

从'./../../data/authentication.service'导入{AuthenticationService};

import {Injectable }来自'@ angular / core';

从{rxjs / Subject'导入{Subject};

import {Observable}来自'rxjs / Observable';

导入*作为io来自'socket.io-client';

import {Http}来自'@ angular / http';



@Injectable（）

导出类ChatService {

private url ='http：// localhost：5000';

private插座; <无线电通信/>
名称;

昵称;

用户;

消息;

routeUrl;

route;



构造函数（私有http：Http，

private authenticationService：AuthenticationService）{}



trackUser（）{

let routeUrl = this.route.url;

this.socket.emit（'track- user'，this.routeUrl）;

}



sendMessage（消息）{

this.socket。 emit（'add-message'，message）;

console.log（message）;

}



getMessages（）{

let observable = new Observable（observer => {

this.socket = io（this.url）;

this.socket.on（'message'，（data）=> {

observer.next（data）;

}）;

return（）=> {

this.socket.disconnect（）;

};

}）;

返回observable; < br $>
}

}



我的尝试：



我尝试使用上面提供的代码，但是我得到了上面描述的错误，我正试图跟踪。

解决方案

< blockquote>基本上，你试图在一个不包含任何东西的变量上得到/设置 url 的值，它是null。



由您决定为什么该变量为null而不是保留您认为它的对象。

I am trying to understand what produces the "EXCEPTION: Cannot read property 'url' of undefined" error in a particular instance. I am importing socket.io into the component, and am emitting within my ngOnInit, which is also being correctly imported. I'm also referencing a chat service, which is also being imported and instantiated in the constructor, and provided in the root app.module. The problem is connected to the "url" being referenced within my ngOnInit. This is what I have in the component:

import { Router } from '@angular/router';
import { AlertService } from './data/alert.service';
import { Component, ViewContainerRef, OnInit } from '@angular/core';
import * as io from 'socket.io-client';
import './rxjs-operators';
import { API } from "./data/api.service";
import { Search } from "./data/search.service";
import { ChatService } from './ui/chat/chat.service';

@Component({
selector: 'app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css']
})
export class AppComponent implements OnInit
{
private socket;
private routeUrl;
private url: string;
public tabOptions: string[] = ['typeA/', 'typeB/'];

public static get view(): ViewContainerRef
{
return AppComponent._view;
}

private static _view: ViewContainerRef;

constructor(api: API,
search: Search,
viewContainer: ViewContainerRef,
private router: Router,
private chatService: ChatService)
{
AppComponent._view = viewContainer;
}

ngOnInit() {
this.router.events.subscribe((route) => {
let routeUrl = route.url;
console.log('The user route changed to: ' + routeUrl);
this.chatService.trackUser();
});
}
}

This component is calling on a chat.service, and specifically a "trackUser()" function, which looks like this:

import { ContextMenu } from './../context-menu.component';
import { AuthenticationService } from './../../data/authentication.service';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';
import { Http } from '@angular/http';

@Injectable()
export class ChatService {
private url = 'http://localhost:5000';
private socket;
name;
nickname;
user;
message;
routeUrl;
route;

constructor(private http: Http,
private authenticationService: AuthenticationService) {}

trackUser() {
let routeUrl = this.route.url;
this.socket.emit('track-user', this.routeUrl);
}

sendMessage(message) {
this.socket.emit('add-message', message);
console.log(message);
}

getMessages() {
let observable = new Observable(observer => {
this.socket = io(this.url);
this.socket.on('message', (data) => {
observer.next(data);
});
return () => {
this.socket.disconnect();
};
});
return observable;
}
}

What I have tried:

I have tried using the code provided above, but am getting the error described above that I'm trying to track.

解决方案

Basically, you're trying to get/set the value of url on a variable that doesn't contain anything, it's null.

It's up to you to figure out why that variable is null instead of holding the object you think it does.

这篇关于在我的angular 2应用程序中了解“EXCEPTION：无法读取未定义的属性'url'的原因”re：socket.io的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！