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注释不与组件一起使用。

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

1 个答案: