angular - 在 VueJs 应用程序中使用 Angular6 应用程序

Question

我们有 Angular 应用程序（版本 6.1.5），它向 Restfull API 发出 HTTP 请求。

我们在 Angular App 中使用了模块化方法。有应用级别的路由配置，每个模块都有自己的路由配置。

这个设置非常好，运行起来没有任何麻烦。

现在根据我们的新要求，我们需要将此 Angular 应用程序与 VueJS 应用程序一起使用。

在我们最初的研究之后，我们使用了 Angular Elements 并创建了 Angular 构建。我们在 VueJS 中使用了这个构建（包含 JS 和 CSS 文件），我们认为它运行良好，直到我们在 VueJS 应用程序上点击刷新。

一旦我们点击刷新，Angular 应用程序路由就不起作用了，我们只会看到空白屏幕。

所以我们想知道的是，我们使用角度元素的方法是否正确。或者有没有更好的方法在 VueJS 应用程序中使用 Angular 应用程序。

谢谢你的帮助。

标签： angularvue.jsangular-elements

Answer 1

据推测，原始问题的评论者都不熟悉Web 组件（Angular Element 使用的组件）。将多个框架与孤立的 Web 组件结合使用是一种完全正常且被接受的做法。事实上，它可能会变得更受欢迎。

无论如何，这里的实际问题是路由库的根本不兼容。因为路由与地址栏和 HTML 5 History API 紧密相关，所以子组件（无论任何框架或 Web 组件）不能简单地按照您期望的方式工作。首先，Vue 路由器位于“父”组件中，而 Angular 路由器（通过 Web 组件）尝试设置路由，然后失败。

您将不得不重构您的 Angular 组件以不使用路由。

这不是 Vue vs Angular vs Web 组件问题，而是路由问题。