如何在 ngOnInit() 之外移動 observable **已更新**

Question

我有以下簡單的單組件應用程序：

導航組件.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
  //vars
  url = 'api address';
  menus;
  content;
  id;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getMenus().subscribe(res => {this.menus = res});
  }  
  //this gets the data for the menus
  getMenus(){
      return this.http.get(this.url);
  }
  //this get the data for the content
  public getContent(): void {
   this.http.get(this.url).subscribe((res) => {this.content = res[this.id]}
 );
  }
  //this gets an id from each menu link, assigns the id to this.id and logs the new value of id.
  public get_id(id)
  {
    this.id = id;
    console.log(id)
    this.getContent()
    return this.id
  }
  }

導航組件.html

//menus
<div *ngFor="let menu of menus; index as id">
    <ul>
        <li><button (click)="get_id(id)">{{menu['course-lesson-name']}}</button></li>
    </ul>
</div>

//content
<div>
    <p *ngIf="content">{{content['course-name']}}</p>
</div>

這是問題：

nav.component.ts 從進行 API 調用的函數中加載菜單和內容，並使用這兩個 observable 訂閱每個：

    this.getMenus().subscribe(res => {this.menus = res});
    this.getContent().subscribe((res) => {this.content = res[this.id]}) //<--notice this.id variable

函數 get_id(id) 使用 (click) 從每個菜單鏈接中獲取索引 ID 編號，並應該為 this.id 變量賦值。

每次單擊每個按鈕時，我都需要一種方法來運行以下命令，而不是將其包含在 ngOnInit() 中。

    this.getContent().subscribe((res) => {this.content = res[this.id]}) 

目前， this.getContent() 加載一次（因為它在 ngOnInit 中）並且不會在新的 this.id 值傳遞給它時重新加載。 它需要在每次 get_id(id) 也運行時運行，以便將 id 的新值傳遞給它並顯示正確的內容。

目前，所有發生的事情是每次單擊按鈕時都會將相對 id 記錄到控制台。

Answer 1

您有兩個選項來處理不斷變化的變量值，要么使用Subjects ，要么使用該變量的setter 。

我將在 Subjects 中留下如何去做，讓你自己探索，我將解釋你如何使用 setter 來做到這一點。

export class NavComponent implements OnInit{
  ...

  _id; // you should't need to access this directly. Only use the getter and setter
  set id(value){
    this._id = value;

    // run whatever functions you need here whenever id's value is changed
    this.getContent().subscribe((res) => {this.content = res[this.id]}) 
  }
  get id(){
    return this._id
  }

  ngOnInit() {
    this.getMenus().subscribe(res => {this.menus = res});
    // You probably need to remove this.getContent() from here now.
  }

  ...
}

現在，只要代碼中有id = somevalue ，就會運行 id 的 setter 函數。 請注意，這有時不是您所需要的，您在使用 setter 時需要注意。

我建議閱讀 RxJS 的Subjects 。 在這些情況下，它們會非常有幫助。

Answer 2

首先，請注意在this.id中沒有定義this.id

然后，保持簡單，如果你想this.getContent被稱為每次點擊由時間，您可以在末尾添加一個電話this.getId因為你在每一次點擊調用它的功能。

此外，您可以在函數本身中簡化 observable 調用，因為您使用組件的變量來保持content和id的內部狀態。

 public getContent(): void
 {
   this.http.get(this.url).subscribe(
      (res) => {this.content = res[this.id]}
   );
 }

 public get_id(id): int
 {
    this.id = id;
    console.log(id)
    this.getContent(); 
    return this.id
  }