在angular2中使用DomContentLoaded的最佳实践？

Question

我看到使用DomContentLoaded监听器的Angular2代码引导的大量示例：

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule);
});

且没有：

platformBrowserDynamic().bootstrapModule(AppModule);

我看过这些文档，它似乎仍然是一个有效的东西，但没有迹象表明何时应该或不应该使用它。

使用它或不使用它的原因是什么？

Answer 1

使用第一种或第二种方法引导Angular app之间没有区别。差异在于它何时发生。

第一种方法将等到<appModule></appModule>，因此浏览器将解析所有HTML。这应该确保您的<script>可用于Angular JS并且它将正确引导。

第二种方法会尝试立即引导它，并根据它的加载方式，它可能会或可能不会工作。

• 如果通过简单的<script>加载到头部，则应该失败
• 如果通过具有defer属性的</body>加载到头部，它将起作用（因为执行被推迟到解析HTML之前）
• 如果在ggplot(mtcars, aes(mpg, disp))+ geom_point()+ annotate("text",25,400, label=("'Large fish' >= 45 ~ 'cm'"), parse=TRUE, hjust=0) 之前加载，它也可以解析HTML（这是在Angular教程页面上使用的最流行的方法）