서비스 레이어 내에서 템플릿에 함수 바인딩하기

Question

서비스와 관련된 기능을 로그인 페이지 구성 요소와 분리하려고하고 있는데 현재 self.context.logout is not a function의 줄에 오류가 있습니다. 아래, loginPage에 loginPage를 삽입하고 서비스 내의 일부 기능을 내 로그인 템플릿에 바인딩하려고합니다. 왜 이런 오류가 발생하는지 알고 싶습니다. 미리 감사드립니다!

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) { 

    } 

} 

템플릿 파일

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

Answer 1

당신은 생성자에서 서비스를 액세스 한정자를 줄 필요가, 그렇지 않으면 그것은 단지로 범위가 생성자

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