我有一个使用 Angular 4 开发的大型应用程序，似乎有一个渲染问题，正如这篇文章中提到的 Angular 2 Chrome DOM 渲染问题 .当我使用路由器从一个组件导航到另一个组件时 虽然这个问题已经有了答案，但我仍然无法解决这个问题。
我的申请结构如下：
app-home --- > app-main --- > app-sub --- > <router-outlet> (contents)
这个选择器中的每一个都导入了用于import @font-face的相同mixin文件，而上面提到的帖子中提到的解决方案建议使用父组件并使用ViewEncapsulation.NONE，我不能做同样的事情，因为在每个组件中都有导入的字体的使用app-home，app-main，app-sub和随后的子组件。当我从 .less 文件中删除 @import 语句时，我得到一个异常，例如
Variable @helvetica-bold is undefined
有没有解决方法可以使我的文本在从一个组件路由到另一个组件时正常显示在 chrome 中。
您需要确保字体导入只调用一次。 因此，您应该从 mixin 文件中删除所有字体导入，就像您在答案中已经尝试过的那样。
但是，您还需要确保字体本身在您的应用中仍然存在一次，所有视图都可以访问它。你可能有一个类似"app.less"或类似文件的文件，其中包含应用所有部分都可用的样式。从 mixin 中删除字体导入，并将其放在此文件中(确保路径引用仍然有效，它们可能需要调整(。如果您还没有这样的文件，则需要创建一个并在应用程序启动时加载一次。