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包含有关登录用户的信息

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

然后您可以在标题组件

中使用此服务

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

如何将登录表单从一个组件显示到另一个组件？

1 个答案: