使用Angular Elements维护Angular项目的最佳实践

如何解决使用Angular Elements维护Angular项目的最佳实践

我维护Angular项目，这是一种组件库/框架，其组件将被其他项目重用。现在所有项目都是用Angular编写的，但是我团队的组件也必须可用于其他平台（例如React / .NET /纯HTML）。

我们使用Angular Elements将组件导出为Web不可知组件。在HTML Web组件中，只能将字符串设置为属性，因此当我需要在Angular中提供数组作为输入时，我会这样做：

const dropdownoptions: string[] = ["one","two"];
...
<app-custom-component [dropdownoptions]="dropdownoptions"></app-custom-component>

在Web组件中，我需要像这样传递字符串：

<custom-component dropdown-options='["one","two"]'></custom-component>

所以这在我的组件中

@input() public dropdownoptions: Array<string>;                   //for native Angular
@Input('dropdown-options') public dropdownoptionsstring: string;  //for other platforms

ngOnInit(): void {
  if (this.dropdownoptionsstring) {
    this.dropdownoptions = JSON.parse(this.dropdownoptionsstring);
  }
}

这里的最佳做法是什么？我们考虑过为Angular和Web组件创建一个单独的项目，但是维护两个单独的代码库是有问题的。