Javascript Angular2将组件方法导入到另一个组件中

Javascript Angular2将组件方法导入到另一个组件中,javascript,angularjs,angular,auth0,Javascript,Angularjs,Angular,Auth0,我有一个home组件,它需要调用LoginComponent方法isLoggedIn()来检查用户是否按如下方式在@CanActivate中登录 仅当用户登录并通过身份验证时,主组件才应激活 HomeComponent.ts import {Component, OnInit} from 'angular2/core'; import {AboutComponent} from "../about/AboutComponent"; import {ROUTER_DIRECTIVES} from

我有一个home组件,它需要调用LoginComponent方法isLoggedIn()来检查用户是否按如下方式在@CanActivate中登录

仅当用户登录并通过身份验证时,主组件才应激活

HomeComponent.ts

import {Component, OnInit} from 'angular2/core';
import {AboutComponent} from "../about/AboutComponent";
import {ROUTER_DIRECTIVES} from "angular2/router";

import {LoginComponent} from '../login/LoginComponent'

@Component({
    selector: 'home',
/*    template: `
    <div>
    <div class="input">
        <label for="Name">Name</label>
        <input type="text" id="name" #name>
    </div>
    <button (click)="onGetAll(name.value)">GET Request
    </button>
    <p>Response: {{response}}</p>
    </div>
    <a [routerLink]="['../About']">link to About component</a>
    `,*/
    templateUrl: '../app/templates/dashboard.html',
    styleUrls: ['../app/assets/light-bootstrap-dashboard.css','../app/assets/demo.css','../app/assets/pe-icon-7-stroke.    css','../app/assets/bootstrap.min.css'],
    directives : [ROUTER_DIRECTIVES]
})

@CanActivate(() => LoginComponent.loggedIn())  //<-- This is not working 
export class HomeComponent implements OnInit {
    response: string;

    constructor() {}

    ngOnInit() {}

    onGetAll(name: string){
       console.log("Button clicked.. more code goes here " + name);  
    }
}    
从'angular2/core'导入{Component,OnInit};
从“./about/AboutComponent”导入{AboutComponent};
从“angular2/ROUTER”导入{ROUTER_指令};
从“../login/LoginComponent”导入{LoginComponent}
@组成部分({
选择器:“主页”,
/*模板:`
名称
获取请求
响应:{{Response}

链接到关于组件 `,*/ templateUrl:“../app/templates/dashboard.html”, 样式URL:['../app/assets/light bootstrap dashboard.css'、'../app/assets/demo.css'、'../app/assets/pe-icon-7-stroke.css'、'../app/assets/bootstrap.min.css'], 指令:[路由器指令] })
@CanActivate(()=>LoginComponent.loggedIn())/
loggedIn
方法不是
静态方法,因此不会调用它

话虽如此,理想情况下,要检查用户是否登录了状态,您应该调用服务


服务应告知用户是否已登录,并且应在服务上使用静态方法。

是,我有一个服务AuthService。它已导入LoginComponent。您可以将loggedin设置为静态方法并重试吗?返回的tokennotexpired方法是什么?它是来自auth0的某个方法吗?谢谢,它成功了。tokenexpired()是来自Auth0的布尔值。在登录和主组件的父组件中添加AuthService作为提供程序。通常是应用程序组件。从登录中删除它。现在将其注入home和login组件,并检查您需要的任何内容。由于您只提供了一次身份验证服务,因此将只为该服务创建一个副本
import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AuthHttp,AuthConfig, tokenNotExpired, AUTH_PROVIDERS} from 'angular2-jwt';

import {HomeComponent} from '../home/HomeComponent'
import {AboutComponent} from '../about/AboutComponent'
import {AuthService} from '../../services/AuthService'

declare var Auth0Lock;


@Component({
    selector: 'protected',
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES],
    providers: [AUTH_PROVIDERS,AuthService]
})

export class LoginComponent { 

  constructor(private auth: AuthService) {
      this.auth.login();
  }
  login() {
     this.auth.login();
  }

  logout() {
    this.auth.logout();
  }

  loggedIn() {
    return tokenNotExpired();
  }

}