当socket.io发出“登录”消息时，TypeError：无法读取未定义的属性“ navigate”

Question

我正在使用angular 4和socket.io开发一个聊天应用程序。
这是我的代码

export class UserService {
socket;


// determines if a user is logged in or not
loggedIn: '';

constructor(private router: Router) {
    this.socket = io('http://localhost:8890');
    this.socket.on('login', function (result) {
        if (result) {
            this.loggedIn = true;
            this.router.navigate(['/profile']);
        } else {
            this.loggedIn = false;
        }
        localStorage.setItem('loggedIn', this.loggedIn);
        console.log(result);
    });
}}

所以每当socket.io发出“登录”信息时，我都会在控制台上收到此错误
错误TypeError：无法读取未定义的属性“导航”
我更改了代码，并从构造函数中初始化了router ：

export class UserService {
socket;


// determines if a user is logged in or not
loggedIn: '';
router: Router;

constructor() {
    this.socket = io('http://localhost:8890');
    this.socket.on('login', function (result) {
        if (result) {
            this.loggedIn = true;
            this.router.navigate(['/profile']);
        } else {
            this.loggedIn = false;
        }
        localStorage.setItem('loggedIn', this.loggedIn);
        console.log(result);
    });
}}

我仍然遇到相同的错误。
如果result为真，如何访问router以便可以重定向到另一个页面？

Answer 1

您正在丢失this变量的上下文，这就是为什么this.router未定义的原因。 使用箭头语法保留上下文：

this.socket.on('login', (result) => { // <--- here
    if (result) {
        this.loggedIn = true;
        this.router.navigate(['/profile']);
    } else {
        this.loggedIn = false;
    }
    localStorage.setItem('loggedIn', this.loggedIn);
    console.log(result);
});