Angular2 – 将路由器出口外的数据传输到另一个组件
我是Angular2的新手,但我已经制作了30个组件和服务,并使用了Input,Output,ChangeDetectorRef,Pipes.所以现在非常了解Angular2.我的app.component.ts看起来像这样
import { Component } from '@angular/core'; @Component({ selector: 'soc',template: ` <header-block></header-block> <router-outlet></router-outlet> `,}) export class AppComponent { } 因为我需要在每个页面中使用我的标题块,所以我将它添加到路由器块之外,所以我不必在任何地方添加它.现在我遇到的问题是在router-outlet中的视图中执行操作后更改header-block中的变量值. 例如,我有一个菜单,只有在用户登录后才能看到. {{ user_is_logged }} <ul class="nav navbar-nav navbar-right" *ngIf="user_is_logged == '1'"> <li><a href="#" (click)="logout($event)">Logout</a></li> </ul> user_is_logged是一个变量,其值来自header.block.component.ts中的localStorage user_is_logged:string = localStorage.getItem("logged"); 当用户未登录时,即home.component.ts(其中写入了登录逻辑)未定义user_is_logged,我要求用户登录并在成功登录后更新user_is_logged变量的值并更新localStorage值变量然后通过使用ChangeDetectionRef(cdr)触发检测更改,然后路由到用户配置文件 this.user_is_logged = "1"; localStorage.setItem('logged','1'); this.cdr.detectChanges(); this.router.navigate(['u/'+user_id']); //user_id is from login response from server 问题是当我在成功登录后到达用户配置文件时,{{user_is_logged}}的值永远不会更新,即使在使用变量本身或使用localStorage中的值甚至调用检测时也是如此. 是可以这样做还是我必须分别为每个页面添加header-block?如果我错过了什么,请询问更多信息. 编辑============> 所以在浏览了Subject,BehaviourSubject,AsyncSubject,ReplaySubject,Observables以及我不能让它工作的时候.这是我写的最后一个代码: home.page.component.ts(登录发生并且必须发出事件) import { HomeService } from '../services/home.service'; // No observable or subject imported here. login() { // Sending status 1 to HomeService this.HomeService.changeStatus("1"); } home.service.ts(由两个组件导入) import { BehaviorSubject } from 'rxjs/BehaviorSubject'; // I imported Subject,Observables but cant get it to work export class HomeService { // This looked more reliable than Subject so used this; init with value "0" public subjectStream = new BehaviorSubject<string>('0'); constructor( ){ this.subjectStream.subscribe(value => { // Successfully logs value "1" sent by changeStatus below console.log(value); }); } changeStatus(value: any){ // Gives value "1" when called by home.page.component.ts console.log(value); // Looks correct because it successfully sent value to construct this.subjectStream.next(value); } } header.block.component.ts import { HomeService } from '../services/home.service'; // No observable or subject imported here also. constructor( ){ this.HomeService.subjectStream.subscribe(value => { // Logs value "0" at beginning but never logs value "1" console.log(value); }); } 我的日志 // logged by constructor when imported by header.block.component home.service.ts:31 0 // logged by constructor of header.block.component itself header.block.component.ts:25 0 // logged by constructor when imported by home.page.component (I think) home.service.ts:31 0 // =================== // Login called here // =================== // logged by changeStatus after login after called by home.component home.service.ts:36 1 // logged by constructor after getting event from changeStatus home.service.ts:31 1 我在header.block.component.ts中缺少什么?由于该值在home.service.ts中成功更新,但从未进入标题. 解决方法
如果您在主页和标题中提供HomeService,则会获得2个HomeService实例.如果要共享服务,则只在父组件上提供一次.如果要与整个应用程序共享单个实例,请仅在AppModule的@NgModule()处提供它
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |