调试 Angular 9：与组件交互

当您在开发模式下运行时，Angular 9 Ivy 运行时提供了一个ng用于调试 Angular 应用程序的新对象。

检查和互动

假设我们有一个名为的父组件HeroesComponent和一个名为的子组件HeroDetailComponent。我们在父组件中选择一个英雄，然后就能看到子组件。现在，如果我们想修改子组件中的英雄，并查看这些更改何时应用到父组件，我们可以通过在浏览器控制台中进行调试来实现。

我们将逐步检查这些值。

这位是战士女王阿斯劳格 (Aslaug)。

使用 Chrome 开发工具，选择“Aslaug”的输入元素。

通过在 Chrome 开发者工具控制台中输入以下命令来设置对HeroDetailComponent及其父级的引用HeroesComponent

// get the HeroDetailComponent
heroComp = ng.getContext($0)

// get the HeroesComponent
heroesComp = ng.getOwningComponent(heroComp)

Chrome 开发者工具公开了$0用于识别所选元素的功能。然后，我们使用ng调试 API获取所选元素的上下文ng.getContext($0)。上下文会帮HeroesDetailComponent我们获取到。

我们还想获取父组件的引用，HeroesComponent这样我们就可以确保只有当用户按下“保存”按钮时，更改的值才会从子组件发送到父组件。我们使用ng.getOwningComponent(heroComp)来获取此引用。

我们来修改一下选中的英雄的名字。

// Change the hero's name
heroComp.editingHero.name = 'Madelyn'

我们修改了组件的模型。浏览器中目前还看不到任何变化。

现在让我们比较一下子组件和父组件中的英雄的名字。

// Compare the hero in the child an parent components
heroComp.editingHero.name === heroesComp.heroes[4].name
// Should be false

我们比较了父组件和子组件的模型值。这些值应该是不同的，因为我们修改了子组件，但还没有将这些更改发送给父组件。

saveHero()让我们通过调用子组件的函数来保存对英雄名字的更改

// Save the changes to the hero
heroComp.saveHero()

我们调用该saveHero()函数，模拟用户按下保存按钮。这会将子组件的 Hero 模型通过发送给父组件EventEmitter。嗯，浏览器中目前还看不到任何变化。

再次比较子组件和父组件中的英雄名称

// Compare the hero in the child an parent components
heroComp.editingHero.name === heroesComp.heroes[4].name
// Should be true

我们比较了子组件和父组件中模型的值。这次它们应该是相同的。但我们注意到，在浏览器中看到的仍然是旧值。

应用 Angular 的变化检测。

// Apply change detection
ng.applyChanges(heroComp)

现在我们运行变化检测，我们会在浏览器中看到变化更新！

太酷了！这只是 Angular 9 的新功能之一。想了解更多，请查看这篇关于 Angular 9 7 个新功能的文章。

您也可以在这里获取这些出色的新 Angular 9 工具