了解ngOnInit

Question

我正在做一个关于angular的udemy课程，偶然发现了这段代码。我有一个示例项目，其中有一个添加项按钮，该按钮在数组中添加一个新项，并在屏幕上显示更新后的数组。

shopping-edit.component.ts

export class ShoppingEditComponent implements OnInit {

  @Input() ingredientsArray : Ingredient[];

  shoppingItemName : string = 'Test';
  shoppingItemAmount : number = 66;

  constructor(private shoppingListService : ShoppingListService) { }

  ngOnInit() {
  }

  onItemAdd(){
    console.log(this.shoppingItemName)
    this.shoppingListService.addIngredient(this.shoppingItemName, this.shoppingItemAmount);
  }

}

我有一个事件发射器，它在单击"add“按钮时发出更新后的数组。

shopping-list.service.ts

ingredientsChanged = new EventEmitter<Ingredient[]>();

addIngredient(name: string, value : number){
  this.ingredients.push(new Ingredient(name, value));
  this.ingredientsChanged.emit(this.ingredients.slice());
} 

为了显示这个列表，我使用了shopping list.Component.ts

export class ShoppingListComponent implements OnInit {

  constructor(private shoppingListService : ShoppingListService){}

  ingredients : Ingredient[];


  ngOnInit() {
    this.ingredients = this.shoppingListService.getIngredients();
    this.shoppingListService.ingredientsChanged.subscribe(
      (ingredients : Ingredient[]) => {
        this.ingredients = ingredients;
      }
    )
    console.log("hello")
  }

}

由于shopping List.Component.ts的ngOnInit()只运行一次，那么每次单击"add“按钮时，更新后的列表是如何显示的呢？

Answer 1

您的列表未在ngOnOInit中更新。您仅在ngOnInit中订阅了一个可观察对象。因此，每当您在订阅中接收到新数据时，您就是在更新一个varible，然后由于该ngOnChanges被触发，这将更新您的视图。

Answer 2

每次调用onItemAdd()时，您都在更新服务中的项目(使用下面这行代码：this.shoppingListService.addIngredient(this.shoppingItemName, this.shoppingItemAmount);)

并且将使用shoppingListService.ingredients (例如：- <div *ngFor="let ingredient of shoppingListService.ingredients > //here you will get individual ingredient </div> )显示

Answer 3

这更多地与rxjs可观察对象的工作方式有关，而不是与ngOnInit有关。订阅监听事件，直到它被取消订阅。如果你只想让它接受第一个元素，你应该这样做：

this.shoppingListService.ingredientsChanged.pipe(take(1)).subscribe(
      (ingredients : Ingredient[]) => {
        this.ingredients = ingredients;
      }
    )