ich ein Haus Komponente haben, die LoginComponent Methode isLoggedIn() aufrufen muss überprüfen, ob der Benutzer angemeldet ist, wie in @CanActivate folgtAngular2 Komponente Methoden in eine andere Komponente importieren
Die Komponente zu Hause nur, wenn der Benutzer aktivieren sollte wird in
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);
}
}
LoginCompoent.ts angemeldet und authentifiziert
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();
}
}
Fügen Sie AuthService als Provider in der übergeordneten Komponente der Komponente "Anmelden" und "Home" hinzu. Normalerweise App-Komponente. Entfernen Sie es von der Anmeldung. Jetzt injizieren Sie es sowohl in Home-und Login-Komponente und überprüfen, was Sie brauchen. Es wird nur eine Kopie für den Auth Service erstellt, da Sie sie nur einmal angegeben haben. – Siraj