AnchovyLegend AnchovyLegend - 1 month ago 10
TypeScript Question

Binding functions within service layer to template

I am trying to separate out the service related functions from the login page component and I am currently getting some errors along the lines of

self.context.logout is not a function
. Below, I am trying to inject the loginService into the loginPage and then bind some of the functions within the service to my login template. Any ideas why I am getting these errors? thanks in advance!

LoginService

import { Injectable } from '@angular/core';

@Injectable()
export class LoginService {
constructor() {
console.log('constructor logic');
}

checkLoginStatus() {
console.log('login logic');
}

logout() {
console.log('logout logic');
}
}


LoginComponent

import { Component } from '@angular/core';

@Component({
selector: 'page-login',
templateUrl: 'login.html',
providers: [LoginService]
})
export class LoginPage {

constructor(loginService : LoginService) {

}

}


Template File

<button class="login-button" on-tap="loginService.checkLoginStatus()">
Log In
</button>
<button class="login-button" on-tap="loginService.logout()">
Log Out
</button>

Answer

You need to give the service in the constructor an access modifier, or else it is only scoped to the constructor

// constructor(loginService : LoginService)
constructor(public loginService : LoginService)
Comments