wuno wuno - 6 days ago 6
Javascript Question

Access Object Instantiated From Another Class In TypeScript

Background

I have an

auth.service.ts
that when a user logs in it queries the
database
and returns any information we have on the user. The data is passed in to create a new
object
of
user
. It looks like this,

user: User;
this.user = res;
console.log(this.user);


Outputs,

Object account_locked: false affiliate_owner: null business_phone: "8178968570" city_address: null contract: false created_on: null dob: "1984-03-05T06:00:00.000Z" email: "example@email.com" employee_owner: null fax_number: "1234567" first_name: "Nicholas" home_phone: "1234567" id: 7last_name: "theman" middle_name: "dude" mobile_phone: "1234567" ssn: "123456789" state_address: null street_address: null user_auth_level: 1 zip_address: null __proto__: Object


That being true, this...

console.log(this.user.email);


Which outputs
example@email.com


The Problem

So when I go to another class and add
auth.service.ts
to it like this,

import { Auth } from './../services/auth.service';

constructor( private router: Router, private auth: Auth, private http: Http ) { }


This outputs undefined,

ngOnInit() {
console.log(this.auth.user);
}


Also from the template I try and use interpolation {{auth.user.email}} which won't work either.

Question

How do I access the
object
user
which is created in
auth.service.ts
from another class. In this case
profile.component.ts
and its template
profile.component.html


Is this a problem of
inheritance
?

Class Minimal

auth.service.ts

export class Auth {
lock = new Auth0Lock(myConfig.clientID, myConfig.domain, options, {});
userProfile: Object;
logreg: LogReg;
user: User;
constructor(private router: Router, private http: Http ) {
// create users
this.logreg = new LogReg(profile.email);
this.checkRegister(this.logreg).subscribe((res)=>{
//do something with the response here
this.user = res;
console.log(this.user);
});
}
}


I want to access that object user here,

profile.component.ts

import { Auth } from './../services/auth.service';

@Component({
providers: [ Auth ],
templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit {

constructor( private router: Router, private auth: Auth, private http: Http ) { }

ngOnInit() {
console.log(this.auth.user);
}
}

Answer

Supposed to have a class model BaseObject in the file objects.ts like

import * as P from "./protocols"

export class BaseObject implements P.ObjectProtocol {

/** 
     * Fill object by properties dictionary
     * @param properties Object Properties dictionary
    */
    public fill(properties:Object) {
        var self=this;
        for (var i in properties) {
            if (self.hasOwnProperty(i)) {
                self[i]=properties[i];
            }
        }
    } 
}

you are going to export this object using export class.

Where ever you want to use this class you do

import {BaseObject} from "./objects"
export class MyObjectImpl extends BaseObject {
 //...
}

Regarding the issue of sharing the object instance you need a singleton pattern, take a look here: Access key data across entire app in Angular 2 & Ionic 2