Angular 2，从另一个组件更新组件

Question

Angular2对我来说这是一项新技术，我有一些问题...... 我有2个组件：

1. 用户登录表单
2. 连接/断开按钮

My App screen shoot

我希望当我连接表单时，我的组件1对我的组件2说：“获取最新信息！”。知道要更新自己，它必须请求组件2初始化时已经创建的Web服务。

如何在LoginComponent中调用我的LoginButtonComponent？

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>

Answer 1

您可以使用event emitter或更复杂的架构，您可以使用rxjs's store