Question

我想实现一些非常简单的登录尝试应用优秀的OOP概念但是我不能在组件之间共享变量。

基本我有一个主要组件有两个子组件Login和ProtectedComponent，流程是当一个人被记录时我想隐藏登录组件并显示受保护的组件。你可以看下面的代码。

import {bootstrap, Component, View, NgIf} from 'angular2/angular2';

//Protected-Content Component
@Component({
  selector: 'protected-content'
})
@View({
  templateUrl: 'app/views/protected-component.html'
})
class ProtectedComponent{
}


//Login Component
@Component({
  selector: 'login'
})
@View({
  templateUrl: 'app/views/login.html'
})
class Login{
  login(username, password){
    if(username.value =="test" && password.value=="test"){
      isLogged = true;
    }
  }
}

@Component({
  selector: 'main'
})
@View({
  template:`
  <login *ng-if="!isLogged"></login>
  <protected-content *ng-if="isLogged"></protected-content>`,
  directives:[Login,ProtectedComponent,NgIf]
})
class Main{
  isLogged:boolean;
  constructor(){
    this.isLogged = false;
  }
}

bootstrap(Main);

任何想法？

Answer 1

我为此目的使用了EventEmiter，它允许在组件之间进行通信。这是好的example。

Answer 2

或者扩展RouteOutlet类并使用instruction.component = Login在登录失败时将用户路由到Login组件（可以通过扩展类中的静态isLogged：boolean检查）。

https://auth0.com/blog/2015/05/14/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-between/

Angular2如何保护内容

2 个答案: