有什么方法可以从 Angular js 应用程序（单页应用程序）调用 Angular 7 应用程序答案

【问题标题】：Is there any way to call angular 7 application from angular js application(Single Page Applications)有什么方法可以从 Angular js 应用程序（单页应用程序）调用 Angular 7 应用程序
【发布时间】：2019-11-14 11:08:44
【问题描述】：

用例：Angular Js 应用程序将具有不同的组件（例如，应用程序的标头包含两个组件（视图 1、视图2）。想法是为每个组件构建一个不同的应用程序组件（view1，view2）使用角度7，但要在应用程序内置角度js中查看应用程序的内容（意味着基本应用程序内置角度js的页眉，页脚应该保持不变，当用户点击时比方说，view1，它应该能够显示在 Angular 7 中构建的 view1 应用程序的内容，给出了 SPA 的概念。

Application1：基于 Angular JS 构建
VIEW1      VIEW2
VIEW1-->基于 Angular 7 构建的应用程序

当用户点击视图 1 时，它应该能够在应用程序 1 中显示

查看1 查看2

//视图1的内容//

【问题讨论】：

看看这篇文章：medium.com/disney-streaming/…

标签： angularjs angular

【解决方案1】：

您可以将View1、View2 导出为自定义元素 (https://medium.com/@tomsu/building-web-components-with-angular-elements-746cd2a38d5b)

@NgModule({
  declarations: [View1Component],
  imports: [BrowserModule],
  entryComponents: [View1Component]
})
export class AppModule {
  constructor(private injector: Injector) {
    const customButton = createCustomElement(View1Component, { injector });
    customElements.define('app-view1', View1Component);
  }

  ngDoBootstrap() {}
}

并因此在您想要的任何其他应用程序中重用它们（包括您的 AngularJS 应用程序）

<!--AngularJS template-->
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <app-news-signup></app-news-signup>

    <!-- Angular files -->
    <script type="text/javascript" src="runtime.js"></script>
    <script type="text/javascript" src="polyfills.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript" src="main.js"></script>

    <!-- Using component -->
    <app-view1></app-view1>
</body>
</html>

【讨论】：