角6-在同一页上可以使用两个角元素组件吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (35)

我试着把独立的角度元素放到一个非角度的网页中。当我只有一个的时候,它是很好的。但是当我在同一个页面上加载两个或更多的元素时,我会得到这样的错误:

未知错误:区域已经加载。

我正在使用构建脚本将我的Dist文件连接到一个js文件中。

const fs = require('fs-extra')
const concat = require('concat')


const files = [
    './dist/elementsApp/runtime.js',
    './dist/elementsApp/polyfills.js',
    './dist/elementsApp/scripts.js',
    './dist/elementsApp/main.js',
]


fs.ensureDir('elements')
.then(() => {
  console.log('success!')
  concat(files, 'elements/include-me-somewhere-else.js')
})
.catch(err => {
  console.error(err)
})

我只能将这些js文件中的一个放在一个页面上。我知道Range7将使整个过程更容易,但我想知道我现在如何才能做到这一点。

提问于
用户回答回答于

这是一个在角5+上完美工作的解决方案。对于角6,我还没有这样做。我已经为一个巨大的CMS项目做了这个工作,我在几个页面中插入了组件,甚至在一个页面中插入了两个相同的角度模块。你可以用一个角度项目。

在站点中,编写组件标记。

需要创建另一个模块(例如mainHelper)来导出每个选定的角标记。

import {NgModule, ApplicationRef, ComponentFactoryResolver} from '@angular/core';
import {FirstModule} from 'YOUR MODULE PATH';
import {FirstComponent} from 'YOU COMPONENT PATH';
import {SecondModule} from 'YOUR MODULE PATH';
import {SecondComponent} from 'YOU COMPONENT PATH';


@NgModule({
  imports: [
    FirstModule,
    SecondModule
  ],
})

export class MainHelper {
  constructor(private resolver: ComponentFactoryResolver) {
  }
  components = [
FirstComponent,
SecondComponent
  ];


  ngDoBootstrap(ref: ApplicationRef) {
    this.components.forEach((component) => {
      const factory = this.resolver.resolveComponentFactory(component);
      const elements = document.getElementsByTagName(factory.selector); //get angular tags on your main website
      if (elements.length > 0) {
        if (elements.length > 1) {
          const selector = factory.selector;
          for (let i = 0; i < elements.length; i++) {
            elements[i].id = selector + '-' + i;
            (<any>factory).factory.selector = '#' + elements[i].id;
            ref.bootstrap((<any>factory).factory);
            // elements[i].id = '';
          }
          (<any>factory).factory.selector = selector;
        } else {
          ref.bootstrap(component);
        }
      }
    });
  }
}

在main.ts中,可以导入MainHelper模块并引导MainHelper。

你的第一个模块应该是这样的:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser'; 
import {FirstComponent} from './first.component';
import {AnotherComponent} from './another/another.component';
@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
  ],
  providers: [
    SampleService // you need provide your services for all the modules
  ],
  declarations: [
    FirstComponent,
    AnotherComponent,
  ],
  bootstrap: [FirstComponent] // important
})
export class ECommerceModule {
}
用户回答回答于

我认为你不应该在一个地方使用2个角度。

解决办法可以是:

  • 用角度建造整个场地。代码的其他部分可以添加到应用程序中。
  • 使用子模块并将两个应用程序与父路由器合并。
  • 对每个角度分量使用iframe。那么ngzone就不会碰撞了。

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问9 回答
  • 富有想象力的人

    3 粉丝0 提问7 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • 人生的旅途

    10 粉丝484 提问6 回答

扫码关注云+社区

领取腾讯云代金券