如何將數據從一個生命週期鉤子傳遞到另一個生命週期

Question

我正在創建一個服務，在ngAfterViewInit中完成數據的獲取。

export class AppComponent {  
    gameData:any; 
    constructor(private _AppComponentService: AppComponentService) {} 

    ngOnInit(){ 
     this._AppComponentService.getGameData().subscribe(x => { 
      this.gameData = x; 
     }); 
    } 

    ngAfterViewInit() { 
     console.log(this.gameData); //Undefined 
    } 
} 

Answer 1

由於.getGameData()可能是一些異步調用那麼當ngAfterViewInit被稱爲this.gameData屬性沒有價值，因爲.subscribe()回調沒有被調用呢。

如果你想使用觀測量爲此，您可以做gameData一個ReplaySubject或訂閱.getGameData()兩個的LiveCycle鉤：

1. 製作gameData一個ReplaySubject

   export class AppComponent {  
       gameData: ReplaySubject = new ReplaySubject(1); 
       constructor(private _AppComponentService: AppComponentService) {} 
   
       ngOnInit(){ 
        this._AppComponentService.getGameData().subscribe(x => { 
         this.gameData.next(x); 
        }); 
       } 
   
       ngAfterViewInit() { 
        this.gameData.subscribe(val => console.log(val)); 
       } 
   } 
   

隨着ReplaySubject即使訂閱，ngAfterViewInit()也會收到一個值s後this.gameData.next(x)發出的價值。

訂閱.getGameData()兩次：

export class AppComponent {  
    observable: Observable; // or EventEmitter depending on what you used in getGameData() 
    constructor(private _AppComponentService: AppComponentService) {} 

    ngOnInit(){ 
     this.observable = this._AppComponentService.getGameData(); 
     this.observable.subscribe(x => { 
      // whatever you need 
     }); 
    } 

    ngAfterViewInit() { 
     this.observable.subscribe(val => console.log(val)); 
    } 
}