2015-11-19 95 views
0

我想实现一些非常简单的登录尝试应用良好的OOP概念,但我无法在组件之间共享变量。Angular2如何保护内容

基本我有一个主要组件,有两个子组件登录和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);

任何想法?

+0

我认为你不能保护前端的内容。例如Chrome中的控制台可以从Firebase读取配置 – Codenator81

回答

0

为此我使用了EventEmiter,它允许组件之间进行通信。这里不错example