Question

您好我有一个奇怪的问题。事件发射器无法正常刷新页面。

首页是登录页面。登录后导航到主页。我需要在home.component.ts

的header.component.html上显示数据

我的组件如下

app.component.html

<app-layout-header></app-layout-header>
<router-outlet></router-outlet>
<app-layout-footer></app-layout-footer>

header.components.ts

@Component({
  selector: "app-layout-header",
  providers: [],
  templateUrl: "./header.component.html"
})
export class HeaderComponent implements OnInit {
  profile = {};

  constructor(
    private _authService: AuthService,
    private _clipboardService: ClipboardService
  ) {}

  ngOnInit() {
    this._clipboardService.myProfileDataEvent.subscribe(data => {
      this.profile = data;
      console.log("data changes");
    });
  }
  ngOnDestroy() {
    // prevent memory leak when component is destroyed
    this._clipboardService.myProfileDataEvent.unsubscribe();
  }

  logout() {
    this._authService.logout();
  }
}

clipboard.service.ts

@Injectable()
export class ClipboardService {
  @Output() myProfileDataEvent: EventEmitter<any> = new EventEmitter();
  constructor() {
    this.myProfileDataEvent.emit({Name:'Siraj'})
  }

  setProfileData(data: any) {
    console.log("emitting events");
    return this.myProfileDataEvent.emit(data);
  }

}

在home.component.ts上我正在调用api并通过调用

更新配置文件数据

this._clipboardService.setProfileData(response.json().payload.Profile)

home.component.ts

 ngOnInit() {
    this._authService.checkLogin();
    this._profileService.getHomeData()
      .subscribe(response => {
       this._clipboardService.setProfileData(response.json().payload.Profile)
        },
        err => {
          alert('home data error');
        });
  }

如果我在登录操作后来到主页，它正在工作。但是在登录后如果刷新页面，则不会在header.component.ts上收到发送的事件

有人可以帮助我。

Answer 1

从我的观点来看，HeaderComponent的onInit方法在构造函数上测试它之后太晚了。似乎事件发射器的订阅必须在OnInit之前完成。

我尝试重建您的代码，但这并不容易。

Working Online Demo

Angular 4事件发射器发出的事件未在页面刷新时接收

1 个答案: