Angular2 it's a new technology for me and I have some problems ... I have 2 components:
- user login form
- connect/disconnect button
I would like when I connect with the form, that my component 1 says to my component 2: "Get up to date!". Knowing that to update itself it must request a web service that it already makes when the component 2 initializes.
How do I call my LoginButtonComponent in my LoginComponent?
LoginComponent
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { LoginService } from './login.service';
import {Router} from '@angular/router';
@Component({
selector: 'app-login',
providers: [LoginService],
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
errorMessage: string;
strings: String[];
mode = 'Observable';
public loginForm = this.fb.group({
mail: ["", Validators.required],
password: ["", Validators.required]
});
constructor(public fb: FormBuilder, private loginService: LoginService, private router : Router) { }
ngOnInit() {
}
login(event){
this.loginService.login(this.loginForm.value)
.subscribe(
success => {
this.router.navigate(['/']);
},
error => function(){}
);
}
}
LoginButtonComponent
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service';
import {Router} from '@angular/router';
@Component({
selector: 'app-login-button',
templateUrl: './login-button.component.html',
styleUrls: ['./login-button.component.css']
})
export class LoginButtonComponent implements OnInit {
errorMessage: string;
mode = 'Observable';
public isConnected : boolean;
public message = "Connectez vous !";
constructor(private loginService: LoginService, private router : Router) {
this.isConnected = false;
}
ngOnInit() {
this.connect();
}
setLogin(){
this.isConnected = true;
this.message = "Se déconnecter";
}
setLogout(){
this.isConnected = false;
this.message = "Connectez vous !";
}
connect(){
/**
* Send query to web service
* web service returns 200 on success and 401 on failure
* */
this.loginService.connected()
.subscribe(
str => {
this.setLogin();
},
error => function(){
this.setLogout();
});
}
logout(){
this.loginService.logout()
.subscribe(
str => this.setLogout,
error => function(){
this.errorMessage = <any>error;
this.setLogout();
});
this.connect();
}
click(){
this.ngOnInit;
if(this.isConnected){
this.logout();
}else{
this.router.navigate(['/login']);
}
}
}
<li>
<a (click)="click()"><i class="fa fa-user-circle"></i> </a>
</li>
Thank you for your help.
Aucun commentaire:
Enregistrer un commentaire