Angular 将服务层中的函数绑定到模板

我正试图从登录页面组件中分离出与服务相关的功能，目前我在

self.context.logout不是一个功能方面遇到了一些错误。下面，我尝试将loginService注入loginPage，然后将服务中的一些函数绑定到我的登录模板。你知道我为什么会犯这些错误吗？提前谢谢

登录服务

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

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

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

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

登录组件

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>


登录
注销
您需要为构造函数中的服务提供访问修饰符，否则它仅限于构造函数

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

另外，它看起来像是您为
LoginService
输入了错误的
@Injectable（）
装饰程序-我认为它不会与
一起工作和没有
@
好的呼叫哈，这太棒了，谢谢你的帮助：）如果没有指定angular2的默认访问修饰符，它的默认访问修饰符是什么？它是私有的吗？我猜“只对构造函数”哈哈。我不知道它叫什么，如果它有名字的话。它绝对不是私有的，因为即使是私有修改器也可以访问模板。记住JS中没有access Modifier之类的东西，所以当编译TypeScript时，Modifier就消失了。所以模板仍然可以访问私有变量你说模板仍然可以访问私有变量是什么意思？那么，将其私有化有什么意义呢？是的，修饰符只是在类中声明变量并在构造函数中赋值的缩写（TypeScript这样做是为了在后台使用）。我忘了。在没有修饰符的情况下，TypeScript不会将属性添加到类中“你说的模板仍然可以访问私有变量是什么意思？”因为JS中没有公共变量或私有变量，而这正是TypeScript编译的目的。这意味着它可以在运行时访问，但不能在编译时访问。修饰符仅用于编译时检查。另请参见前面关于typescript在有修饰符时向类添加属性的注释