Angular：如何声明异步组件

Question

我正在尝试找到一种方法来声明异步组件，然后在

.html

中将其用作普通组件，该组件在

declaration

内的

app.module

中声明

我的

app.module.ts

：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: []
})
export class AppModule {
  constructor() {
    this.loadComponent()
  }

  loadComponent() {
    // load and resolve FooComponent component async
  }
}

然后在

app.component.html

我们可以参考

FooComponent

<foo-component></foo-component>

我在互联网上能找到的只是“动态创建组件”，其中我们在

ng-template

文件中包含

.html

和一些

ref

，然后使用

createComponent

（或

resolveComponent

）API 以编程方式针对 ref 创建 FooComponent 。但这不是我所期望的。

它似乎引用了

.html

文件中的 Angular 组件，我们需要在构建时将其静态地放入

declaration

中。不知道如何动态地实现它。

Update

：我实际上在做的是，我有一个在多个项目中使用的lib，痛苦的部分是每次当lib有新的更新时，我需要为每个项目重新运行npm install在不同的位置（多个存储库）。我们公司采用了微前端（MFE）（webpack 模块联盟），效果非常好，我正在尝试应用到该库 - 将其转换为 MFE。这样做，我不需要每次我的库更新时都运行

npm install

，在每个 MFE 中我只需调用库即可在运行时获取其最新更新

请帮忙。谢谢🙏

Answer 1

这是一个垃圾答案：

您正在寻找的是 html 中的异步管道：

示例：

   <ng-container *ngIf="user$ | async; let user">...</ng-container>

   <div *ngIf="(user$ | async) || {}; let user">
     <h3> {{user?.name}} </h3>
   </div>

   <ul *ngIf="users$ | async as users">
      <li *ngFor="let user of users">{{user.name}}</li>
      <li *ngIf="!users.length">No users</li>
   </ul>