时间戳

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

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

问题描述

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

Application1：建立在 Angular JS 上

VIEW1      VIEW2

VIEW1--> 基于 Angular 7 构建的应用程序

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

视图 1 视图 2

//视图1的内容//

标签： angularjsangular

解决方案

您可以将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>

推荐阅读