时间戳

首页 > 解决方案 > Angular 9 - 如何使用组件降级多个模块？

angularjs - Angular 9 - 如何使用组件降级多个模块？

问题描述

我正在尝试将多个 Angular 9 模块分组为 AngularJS 的降级模块。我可以让它对一个人正常工作，但我很难让它对多个人工作。我不断收到这些错误：

我已经尝试将值更改downgradedModule为'SharedModule', 'sharedModule', 'shared-module', 并且SharedModule没有运气。我不确定在这里还能做什么。

注意：所有手动引导都已完成。不将其包含在我的代码示例中，因为该部分工作正常。就像我说的，当我只降级一个模块时，这很好用

ngx.module.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { downgradeModule, downgradeComponent } from '@angular/upgrade/static';

import { SharedModule } from './shared/shared.module';
import { ViewerModule } from './viewer/viewer.module';

import { ExampleComponent } from './shared/example/example.component';

const sharedModule = (extraProviders) => platformBrowserDynamic(extraProviders).bootstrapModule(SharedModule);
const viewerModule = (extraProviders) => platformBrowserDynamic(extraProviders).bootstrapModule(ViewerModule);

export const NgxModule = angular
    .module('ngx', [
        downgradeModule(viewerModule),
        downgradeModule(sharedModule)
    ])
    .directive('exampleComponent', 
        downgradeComponent({ component: ExampleComponent, downgradedModule: 'sharedModule' })) // error
    .name;

shared.module.ts：



import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example/example.component';


@NgModule({
  imports: [
    BrowserModule,
    CommonModule
  ],
  declarations: [
    ExampleComponent
  ],
  entryComponents: [
    ExampleComponent
  ]
})
export class SharedModule { 
    constructor() { }
    ngDoBootstrap() {
    }
}

查看器.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';


@NgModule({
  imports: [
    BrowserModule,
    CommonModule
  ],
  declarations: [
    PdfComponent
  ],
  entryComponents: [
    PdfComponent
  ]
})
export class ViewerModule { 
    constructor() { }
    ngDoBootstrap() {
    }
}

标签： angularjsangular

解决方案

我能够在周末进行这项工作，并通过更仔细地阅读文档找到了我的解决方案：

downgradedModule?: string: 组件“所属”的降级模块（如果有）的名称，由对 downgradeModule() 的调用返回。当需要实例化组件时，它是模块，其相应的 Angular 模块将被引导。

来源： https ://angular.io/api/upgrade/static/downgradeComponent

downgradeModule()其他人可能遇到的一个陷阱是在将其分配给downgradedModule属性时不能直接调用。您必须先将其降级并先将其存储在变量中，然后再将其传入。

const ng2BootstrapFn = (extraProviders) => platformBrowserDynamic(extraProviders)
    .bootstrapModule(SharedModule);
const downgradedSharedModule = downgradeModule(ng2BootstrapFn);

export const NgxModule= angular
    .module('ngx', [downgradedSharedModule ])
    .directive('exampleComponent', downgradeComponent({ 
        component: ExampleComponent, 
        downgradedModule: downgradedSharedModule }))
    .name;

推荐阅读