angular - Angular2如何保护内容

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，它允许组件之间进行通信。这是一个很好的例子。

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-之间/