了解 ngOnInit

Posted 2023-03-13

【中文标题】了解 ngOnInit

【英文标题】：Understanding ngOnInit

【发布时间】：2020-01-29 13:26:38

【问题描述】：

我正在做关于 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);
  

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

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() 只运行一次，所以每次点击“添加”按钮时如何显示更新的列表？

【问题讨论】：

这是因为observables。我不会回答，因为我只会模仿文档，但这是 Angular 的关键部分，我建议您至少阅读 Angular 文档以了解基础知识！

只要你有一个活跃订阅的 ingredientsChanged observable，当 observable 的值改变并且你的组件值更新时，你组件中 subscribe 方法的代码就会被执行。

【参考方案1】：

每次调用 onItemAdd() 时，您都在更新正在使用的项目（使用这行代码：this.shoppingListService.addIngredient(this.shoppingItemName, this.shoppingItemAmount);）

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

【参考方案2】：

这与 rxjs Observables 的工作方式有关，而不是 ngOnInit。订阅会监听事件，直到它被取消订阅。如果您只希望它采用第一个元素，您应该这样做：

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

【参考方案3】：

ngOnOInit 中没有更新您的列表。您只是在ngOnInit 中订阅了一个 observable。因此，每当您在订阅中收到新数据时，您都会更新一个变量，因为ngOnChanges 被触发，这将更新您的视图。

【讨论】：

如果您需要进一步说明，请告诉我