piral - 我如何在 piral 中使用完整的 Angular 应用程序作为 pilet

Question

我有一个现有的角度应用程序，它有自己的路由和多个相互使用的组件。使用 piral-ng 转换器，我可以转换要在 piral 中使用的角度分量，但如果一个角度分量正在使用另一个角度分量，我会出错。

有什么方法可以使用完整的 Angular 应用程序作为 pilet

Answer 1

为了使用其他 Angular 组件，您需要将它们全部定义在同一个模块中。

因此，如果您只这样做：

import { PiletApi } from 'my-piral-instance';
import { AngularPage } from './AngularPage';

export function setup(piral: PiletApi) {
  piral.registerPage('/sample', piral.fromNg(AngularPage));
}

然后在里面使用其他东西是AngularPage行不通的。

但是，如果您在一个模块中定义所有这些内容，例如

import { NgModule } from '@angular/core';
import { SharedModule } from 'piral-ng/common';
import { AngularPage } from './AngularPage';
import { OtherComponent } from './OtherComponent';

@NgModule({
  imports: [SharedModule],
  declarations: [AngularPage, OtherComponent],
  exports: [AngularPage, OtherComponent]
})
export class AppModule {}

那么它会起作用，因为您正确地告诉piral-ng使用该模块：

import { PiletApi } from 'my-piral-instance';
import { AppModule } from './AppModule';
import { AngularPage } from './AngularPage';

export function setup(piral: PiletApi) {
  // this "teaches" Piral about the given module
  piral.defineNgModule(AppModule);

  // since we export the AngularPage from the defined module
  // Piral will use the AppModule for bootstrapping the Ng app
  piral.registerPage('/sample', piral.fromNg(AngularPage));
}

这种使用OtherComponent其注册标签的方式可以正常工作，因为它们被正确定义并共享相同的 Angular 模块。