Typescript Angular2从集中式数据检测父级中的变量变化
这是关于如何处理这个小模式的另一个快捷方式。我想更新父组件中的一个变量,该变量已从一个集中服务分配了一个值,该服务将保存我的数据,以便我可以在整个应用程序中共享它。我正在使用Angular2.alpha46构建使用typescript 以下面的例子为例:) Main.ts:Typescript Angular2从集中式数据检测父级中的变量变化,typescript,angular,Typescript,Angular,这是关于如何处理这个小模式的另一个快捷方式。我想更新父组件中的一个变量,该变量已从一个集中服务分配了一个值,该服务将保存我的数据,以便我可以在整个应用程序中共享它。我正在使用Angular2.alpha46构建使用typescript 以下面的例子为例:) Main.ts: import {Component, CORE_DIRECTIVES, Observable, Input, bootstrap} from 'angular2/angular2'; import {RouteConfig,
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>
因此,我将从一个子组件调用userService方法login,它将loggedIn布尔值更改为true
子组件(其中我调用服务方法)
我希望父视图会相应地更新,但事实并非如此(显然)
从本质上来说,强制“摘要”(如angular 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
});
嘿,我试着使用observable,但我无法得到你的语法或任何类似的工作…这是一篇关于它的好文章:仍然找不到解决这个问题的方法与build 46:)
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
});