0
Angular2からコンポーネントを更新... 私は2つのコンポーネントがあります。角度2、それは私にとって新しい技術だと私はいくつかの問題を持っている別の
- ユーザのログインフォーム
- 接続/切断ボタン を
私は、フォームに接続したときに、私は私の部品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>
https://angular.io/docs/ts/latest/cookbook/component-communication.html – echonax