Angular2 从集中数据中检测父变量的变化

Question

这是关于如何处理这个小模式的另一个快速说明。我想更新我的父组件中的一个变量，该变量已从一个集中式服务中分配了一个值，该服务将保存我的数据，以便我可以在整个应用程序中共享它。我正在使用 Angular2.alpha46 使用 typescript.

构建

采取以下:)

Main.ts:

import {Component, CORE_DIRECTIVES, Observable, Input, bootstrap} from 'angular2/angular2';
import {RouteConfig, RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';
import {Routes,  APP_ROUTES} from './core/route.config';
import {UserService} from "./shared/service/user.service";
import {InMenu} from './shared/pipe/inmenu.pipe';

@Component({
    selector: 'Main',
    providers: [],
    templateUrl: './app/main.html',
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES, RouterLink],
    pipes: [InMenu]
})

@RouteConfig(APP_ROUTES)

export class Main {
    routes = APP_ROUTES;
    loggedIn: Boolean;

    constructor(private UserService: UserService) {
        this.loggedIn = UserService.isLoggedIn();
    }
}

main.html（其中绑定了我的 loggedIn 变量的部分）

<header>
    <span>LOGGED IN STATUS: {{loggedIn}}</span>
</header>

user.service.ts（简体）

import {Inject} from 'angular2/angular2';
import {Http, HTTP_BINDINGS, Headers} from 'angular2/http';
import {ROUTER_BINDINGS} from 'angular2/router';
import {User} from '../../model/user.model';

export class UserService {

    private user: User;
    private loggedIn: Boolean;

    constructor(@Inject(Http) private http:Http) {
    }

    getLoggedInUser() {
        return this.user;
    }

    isLoggedIn() {
        return this.loggedIn;
    }

    login(user: User) {
        var postData = "email=" + user.email + "&password=" + user.password;

        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/x-www-form-urlencoded');

        return this.http.post('/auth/local', postData, {
                headers: this.headers
            })
            .map((res:any) => {
               // Update variable!!!!
               this.loggedIn = true;

               return this.handleResponse(res);
            });
     }

}

因此，我会从一个子组件调用 userService 方法登录，它将 loggedIn 布尔值更改为 true。

子组件（我调用服务方法的地方）

import {Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {UserService} from '../../shared/service/user.service';
import {Router} from 'angular2/router';
import {User} from '../../model/user.model';
import {APP_ROUTES, Routes} from '../../core/route.config';

@Component({
    selector: 'login-form',
    templateUrl: 'app/login/components/login-form.component.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})

export class LoginFormComponent{
    user: User;
    submitted: Boolean = false;
    errorMessage = null;

    constructor(private userService:UserService, private router: Router) {
        this.user = new User();
    }

    onLogin() {
        this.submitted = true;

        this.userService.login(this.user)
            .subscribe(
                data => {},
                err => {}
            );
    }
}

我希望父视图相应地更新，但事实并非如此（显然）

从本质上强制 "digest"（如 angular 1）重新呈现和更新父视图或检测从中更改的集中共享的变量的最佳解决方案是什么子组件？事件发射器？

再次感谢！

Answer 1

我会在 UserService 中为 loggedIn 添加一个观察者，并让组件订阅对该观察者的更改。

export class UserService {
    this.loggedIn$ = new Observable(observer => {
        this._loggedInObserver = observer;
    }).share();

    login(user: User) {
    var postData = "email=" + user.email + "&password=" + user.password;

    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/x-www-form-urlencoded');

    return this.http.post('/auth/local', postData, {
            headers: this.headers
        })
        .map((res:any) => {
           this._loggedInObserver.next(true);

           return this.handleResponse(res);
        });
    }
}

然后在你的组件中订阅新的观察者：

userService.loggedIn$.subscribe(loggedIn => {
   // Update local value
});

Angular2 从集中数据中检测父变量的变化

Angular2 detect variable change in parent from centralized data

typescript

angular