在我的一个Angular 2路线的模板(FirstComponent)中,我有一个按钮
first.component.html
<div class="button" click="routeWithData()">Pass data and route</div>
我的目标是实现:
按钮单击 - >路由到另一个组件,同时保留数据,而不使用其他组件作为指令.
这就是我试过的......
第一种方法
在同一视图中,我存储基于用户交互收集相同的数据.
first.component.ts
export class FirstComponent {
constructor(private _router: Router) { }
property1: number;
property2: string;
property3: TypeXY; // this a class, not a primitive type
// here some class methods set the properties above
// DOM events
routeWithData(){
// here route
}
}
一般情况下我路由SecondComponent通过
this._router.navigate(['SecondComponent']);
最终传递数据
this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);
而带参数的链接的定义是
@RouteConfig([
// ...
{ path: '/SecondComponent/:p1:p2', …在Angular 1.xx中,您只需要相同的服务,最终得到相同的实例,从而可以共享服务中的数据.
现在在Angular 2中,我有一个引用我的服务的组件.我可以阅读和修改服务中的数据,这很好.当我尝试在另一个组件中注入相同的服务时,似乎我得到了一个新实例.
我究竟做错了什么？是模式本身是错误的(使用服务来共享数据)还是我需要将服务标记为单例(在应用程序的一个实例中)或其他什么？
我2.0.0-alpha.27/ 顺便说一下
我在注释中通过appInjector(edit:now providers)注入一个服务@Component,然后在构造函数中保存一个引用.它在组件本地工作 - 只是不跨组件(它们不共享相同的服务实例),就像我想的那样.
更新:从Angular 2.0.0开始,我们现在有@ngModule,您可以在其中定义providers属性上的服务@ngModule.这将确保将该服务的相同实例传递给该模块中的每个组件,服务等.
https://angular.io/docs/ts/latest/guide/ngmodule.html#providers
使用Angular2创建单页面应用程序,我将拦截未经身份验证的用户访问自定义中的非公共路由RouterOutlet并将其重定向到登录视图.成功登录后,我想将用户重定向到最初请求的视图,而不是默认视图.
我注意到Router有一个renavigate()导航到最后一条成功路线的功能,但最后一条成功的路线是,/auth/login而不是最初请求的网址.
基本上:我如何访问或确定以前请求的URL？
我真的不想求助于传递查询字符串参数,除非我真的需要.理想情况下,访问history集合作为Router组件的一部分会很好,类似于backbone.history!
我想从Angular Service中检索更新的对象值(借用者).我Subject在服务中创建了一个RxJS ,以便多个组件可以订阅它并获得更新的值.
当我通过组件中提供的服务订阅Subject时,我发现onNext()即使.next()从BorrowerService 调用函数参数也不会被调用.
如果我在BorrowerService类中订阅,我发现它.next()按预期工作.似乎Subject是调用的Service类.next()和组件之间的不同实例,因此不会获得该订阅.
这是否无法理解Angular Services或Observables？如何在不知道何时调用的情况下更新服务中的值并被动地获取组件中的更改.next()？
借款人-report.component.ts
@Component({
...
providers: [BorrowerService]
})
export class BorrowerReport {
private borrower: Borrower;
constructor(private borrowerService: BorrowerService) {
this.borrowerService.borrowerChanged.subscribe(borrower => {this.borrower = borrower});
}
}
borrower.service.ts
@Injectable()
export class BorrowerService {
public borrowerChanged: Subject<Borrower> = new Subject<Borrower>();
//event handler
selectBorrower(borrower: Borrower) {
this.borrowerChanged.next(borrower);
}
}