Как два разных компонента взаимодействуют друг с другом?

Question

Я использую инжектор поставщика, чтобы отправить команду из компонента Signin в компонент Profile, чтобы выйти. Хотя, журналы консоли показывают мне, что функция Signout работает должным образом, директивы (HTML) * ngIf не изменяются соответствующим образом.

Что я делаю неправильно?

**Signin component** 

import {Component, OnInit, Injectable } from '@angular/core'; 

import {ProfileUserComponent} from '../profile.user.component/profile.user.component' 


@Component({ 
    selector: 'signin-button', 
    template: `<button (click)="onSignOut()" *ngIf="loggedIn === true " >Sign Out</button> 
<button (click)="onSignIn()" *ngIf="loggedIn !== true " >Sign In</button> 
`, 
    providers: [ProfileUserComponent] 


}) 




@Injectable() 
export class SigninComponent { 

loggedIn: boolean; 

constructor(public http: Http, private profileUserComponent: ProfileUserComponent){} 

     ngOnInit(): any{} 

onSignOut(): void{ 

// send command to the profile component 
this.profileUserComponent.signout(false);  

} 

} 





**ProfileUserComponent** 
import {Component, OnInit, Injectable} from '@angular/core'; 



    @Component({ 
      selector:'profile-user', 
      template: `<img class="ui mini image" src="image1.jpg" *ngIf="loggedIn === true"> 

    <img class="ui mini image" src="image2.jpg" *ngIf="loggedIn === false"> 

    `, 

    }) 

     signout(status){ 
     this.loggedIn = status; 
     console.log ("logged out", this.loggedIn); // Console log tells me that "Logged Out False" 
}  


} 

Answer 1

Весь ваш код необходимо переписать. Вы пытаетесь ввести один компонент в другой, что неверно. Вы вводите услуги в компоненты.

Если оба компонента ProfileUserComponent и SigninComponent должны быть компонентами с пользовательским интерфейсом, тогда вы можете создать общую службу, которая знает статус входа в систему и вводится в оба компонента. Один компонент может установить статус входа в свойстве службы (например, isSignedIn: EventEmitter), который отправит событие о состоянии входа в систему, а другой компонент будет прослушивать это событие.

На стороне примечания: @ Инъекционная аннотация не используется с компонентами.