两个不同的组件如何相互通信？

Question

我正在使用 Provider 注入器将命令从 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 都必须是带有 UI 的组件，那么您可以创建一个知道登录状态并注入到两个组件中的公共服务。一个组件可以在服务的属性上设置登录状态（例如 isSignedIn: EventEmitter），它会发送一个关于登录状态的事件，另一个组件会监听这个事件。

附注：@Injectable 注解不与组件一起使用。