Question

用例：Angular Js应用程序将具有不同的组件（例如，应用程序的头包含两个组件（View 1，View2）。该想法是为每个应用程序构建一个不同的应用程序。使用angular 7的component（view1，view2），但要在应用程序内置angular js中查看应用程序的内容（这意味着基本应用程序内置angular js的页眉，页脚应保持不变，并且在用户单击时假设view1，它应该能够显示Angular 7中内置的SPA概念的view1应用程序的内容。

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

当用户单击“视图1”时，则应能够在应用程序1中显示

VIEW1 VIEW 2

//视图1的内容//

Answer 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>

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

1 个答案: