如何將登錄表單從一個組件顯示到另一個組件？

Question

我想從登錄組件顯示登錄表單，如果點擊標題組件或其他組件的sign Up菜單。怎麼做？ 我有下面的代碼。

header.component.ts

@Component({ 
    selector: 'app-header', 
    templateUrl: 'header.component.html', 
    styleUrls: ['../app.component.css'], 
}) 

header.component.html

<li (click)="showmodel('login');" *ngIf="authenticationService.loginStatus==0"><span>Sign Up</li>      
<li (click)="logout();" *ngIf="authenticationService.loginStatus==1"><span>Logout</li>      

login.component.ts

@Component({ 
    selector: 'app-login', 
    templateUrl: 'login.component.html', 
    styleUrls: ['../login.component.css'], 
}) 

login.component.html

<div data-backdrop="true" class="modal fade " tabindex="-1" [ngClass]="{'in': visibleAnimate}" [ngStyle]="{'display': visibleAnimate ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">        
    <div class="modal-dialog" data-backdrop="static"> 
     <div class="modal-content "> 
      <div class="modal-header">Login form 
      </div> 
     </div> 
    </div> 
</div> 

app.component.ts

@Component({ 
    selector: 'my-app', 
    template: ` 
    <app-header></app-header> 
    <app-login></app-login> 
    <router-outlet></router-outlet>  
    <app-footer></app-footer>`, 
    styleUrls: ['../app/app.component.css'], 
}) 

Answer 1

你應該使用共享服務與Subject變量，而您可以使用其他組件中，

export class AppMessageQueuService { 
    authenticatedUserData: Subject<LoginInfo>; 
    constructor() { 
     this.authenticatedUserData = new Subject<LoginInfo>(); 
    } 

} 

其中LoginInfo co ntains有關的loggedIn用戶

export class LoginInfo { 
    username: string; 
    role: string; 
    token: string; 
    isLoggedIn: boolean; 
} 

的信息，那麼你就可以在你的頭組件使用這項服務，

this._appMsgService.authenticatedUserData.asObservable().subscribe(value => 
{ 
      this.isLoggedIn = value.isLoggedIn; 
});