Angular 2, обновить компонент из другого

Angular2 это новая технология для меня, и у меня есть некоторые проблемы …
У меня есть 2 компонента:

  1. форма входа пользователя
  2. кнопка подключения / отключения

Мой экран приложения стрелять

Я хотел бы, когда я соединяюсь с формой, что мой компонент 1 говорит моему компоненту 2: «будьте в курсе!». Зная, что для обновления необходимо запросить веб-службу, которая уже выполняется при инициализации компонента 2.

Как вызвать мой LoginButtonComponent в моем 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> {{ message }}</a>          
</li>

1 ответ