2

编辑：

这对我来说可能是一个更适用的问题，因为它更有用如何查看 Angular2 中 localStorage 的更改？

所以我的主要 app.component 带有导航栏和一个单独的登录页面。我想要的是当他们登录时他们可以看到菜单，否则他们看不到。如果我可以添加对 localStorage 事件的更改，那就太好了。这样，我可以制作一个菜单来动态更改 localStorage 事件。

@Component({
    selector: 'my-app',
    providers: [FORM_PROVIDERS, RoleService, UserService, Login, LoginService],
    inputs: ['loggedIn'],
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES, LoggedInRouterOutlet],
    template: `<body>
                <div *ngIf="loggedIn === true">
                    <nav class="navbar navbar-inverse navbar-top" role="navigation">
                        <div class="container">
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul class="nav navbar-nav navbar-right">
                                    <li>
                                        <a (click)="logout()">Logout</a>
                                    </li>
                                    </ul>
                                </div>
                         </div>
                    </nav>
                </div>
                    <div class="container">
                        <router-outlet></router-outlet>
                    </div>
                  </body>`
})
export class AppComponent{

    loggedIn: boolean;

    constructor(public Login: Login){ /*<--This is a component, can I use it in constructor?*/
        Login.loggedIn.subscribe((data) => this.onUserChanged(data));
    }

    onUserChanged(user){
        this.loggedIn = true;
        console.log(this.loggedIn);
    }

    logout(){
        localStorage.removeItem('jwt');
    }

}

我的登录组件：

@Component
export class Login{

    jwt: any;
    username: string;
    password: string;
    loggedIn: EventEmitter<boolean>;

    constructor(public _loginService: LoginService, public router: Router){
        this.loggedIn = new EventEmitter();
    }

    submitLogin(username, password){
        let body = {username, password};
        this._loginService.authenticate(body).subscribe(
            response => {
                localStorage.setItem('jwt', response.json_token);
                this.router.navigate(['UserList']);
                this.loggedIn.emit(<boolean>true); /*<---Is this in the wrong place?*/
                console.log(this.loggedIn);
            }
        );

    }
}

我的登录服务：

@Injectable()
export class LoginService {

    constructor(public http: Http) {

    }

    authenticate(form_body){
        return this.http.post('/login', JSON.stringify(form_body), {headers: headers})
                .map((response => response.json()));
    }
}

我确定我的事件发射器有问题。我试图复制这篇文章Angular2 中已经回答的内容 - 在多个组件中“监视”提供程序属性，但我似乎无法弄清楚我做错了什么。

如果 localstorage 设置为显示菜单，我想要一些说明。谢谢！

4

1 回答 1

1

当您想与整个应用程序共享时，不要将服务 ( LoginService, ...) 添加到组件列表中。providers:只添加到

bootstrap(AppComponent, [OtherProviders, LoginService]);

当您将它添加到组件时，会为此组件创建一个新的（不同的）实例，并且它是其他组件接收的子代。当一个服务只添加到bootstrap()整个应用程序中时，共享同一个服务实例。

你的服务也需要@Injectable()装饰师

@Injectable()
export class Login{

将此也添加到您的所有其他服务中（如果服务没有构造函数参数，则不是绝对必要的）。

于 2016-02-14T17:54:45.460 回答