相关疑难解决方法(0)

我有一个用于<ng-content>转换内容的自定义模态组件:

@Component({
  selector: 'modal-container',
  template: `
    <div [class]="css">
      <div [attr.id]="id" class="reveal" (open)="openModal()">
        <ng-content></ng-content>
      </div>
    </div>
  `
})
export class ModalContainerComponent {
    . . .
}

在<ng-content>我的内容中有一个发出open事件的组件:

@Component({
  selector: 'login-modal',
  template: `
    <modal-container [id]="'login-modal'">
      <section>...</section>
    </modal-container>
  `,
})
export class LoginModalComponent implements OnInit {

    @Output()
    open = new EventEmitter();

    ngOnInit(): void {
        // Here I am checking an ngrx store with code that is not included
        if (state.openLoginModal) {
          this.open.emit();
        }
    }

}

然而,ModalContainerComponent …

在我的Angular 2(beta 14)应用程序中,我需要跟踪用户登录状态以隐藏/显示某些元素.

我得到的问题是属性绑定不像我做的那样工作如下.

我创建了一个用于存储和更新全局变量的类:

APP-global.ts

 import {Injectable} from "angular2/core";

 @Injectable() export class AppGlobals {
   // use this property for property binding
   public isUserLoggedIn: boolean = false;

   setLoginStatus(isLoggedIn){
       this.isUserLoggedIn = isLoggedIn;
   }

   getLoginStatus(){
       return this.isUserLoggedIn;
   } }

在登录组件中,我导入了AppGlobals

export class LoginComponent {
    constructor(private _appGlobals: AppGlobals) { }

并设置登录状态

this._appGlobals.setLoginStatus(真);

在另一个组件中,我像在LoginComponent中那样注入AppGlobals

我定义了一个类(组件)的属性

isLoggedIn:boolean = this._appGlobals.isUserLoggedIn; //我也尝试使用getter而不是public属性(见上文)

然后我在组件的模板中使用它来显示/隐藏某个元素:

<!-- here I also tried with {{!isLoggedIn}} but results in a syntax error whereas using [(hidden)] instead of [hidden] changes nothing -->
<div id="some-element" …