如何在Angular中更改类变量

Question

我需要在登录（）函数后更改name和id。但是这个

that.name = vk.data.user.first_name + ' ' + vk.data.user.last_name;
that.id = vk.data.user.id;

创建局部变量name和id。如何更改LoginComponent类的名称和ID？

登录组件：

import { Component, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFire } from '../shared';
import {
    AngularFireDatabase,
    AngularFireDatabaseModule,
    FirebaseListObservable,
    FirebaseObjectObservable
} from 'angularfire2/database';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})

@Injectable()
export class LoginComponent {
    public error: any;
    public name: string;
    public id: number;

    constructor(public afService: AngularFire, private router: Router, public db: AngularFireDatabase) { }

    async login() {
        var that = this;    
        var vk = {
            data: { user: { first_name: '', last_name: '', id: null } },
            appID: 6480684,
            init: new Promise(function (resolve, reject) {

                VK.init({ apiId: 6480684 });
                load();

                function load() {
                    VK.Auth.login(authInfo);

                    function authInfo(response) {
                        if (response.session) {
                            vk.data.user = response.session.user;
                            resolve();
                        } else {
                            reject();
                        }
                    }
                }
            })
        }

        async function data() {
            await vk.init;
            console.log('vk login');
            that.name = vk.data.user.first_name + ' ' + vk.data.user.last_name;
            that.id = vk.data.user.id;
            that.db.object('users/' + vk.data.user.id).set({
                id: that.id,
                displayName: that.name
            });
        }
        await data();
    }

聊天组件：

import { Component, AfterViewChecked, ElementRef, ViewChild, Input, OnChanges } from '@angular/core';
import { FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { LoginComponent } from '../../login/login.component';

import { AngularFire } from '../../shared';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements AfterViewChecked, OnChanges {
  @ViewChild('scroller') private myScrollContainer: ElementRef;
  @Input() channelId;

  public messages: FirebaseListObservable<any>;
  imageSrc: string;
  public newMessage: string;
  public newImage: any;

  constructor(public afService: AngularFire, public afAuth: AngularFireAuth, public login: LoginComponent) {}

  ngOnChanges() {
    this.messages = this.afService.getMessages(this.channelId);
  }

        async sendMessage() {
            var name;
            if (this.afAuth.auth.currentUser !== null) {
                name = await this.afService.getDisplayName();
            } else {
                name = this.login.name;
                console.log(name);
            }
        this.afService.sendMessage(this.channelId, this.newMessage, name);
    this.newMessage = '';
  }