如何在 Angular 中覆盖第三方库中的组件？

Question

我正在使用一个内部库，它提供了通用的身份验证解决方案，包括带有登录表单的登录页面。对于特定应用程序，我需要通过添加附加功能和更改布局 (HTML) 来自定义登录表单。

是否可以覆盖库提供的登录表单组件而不创建全新的自定义登录页面？

这是我迄今为止尝试过的：

@Component({
  //same selector
  selector: 'login-form',
  templateUrl: './custom-login.component.html',
  styleUrls: ['./custom-login.component.scss'],
  providers: [
    {
      provide: LoginComponent,
      useExisting: CustomLoginComponent,
    },
  ],
})
export class CustomLoginComponent extends LoginComponent {}

然而，这个方法似乎并没有达到预期的效果。仍然显示图书馆的原始登录表单，而不是我的自定义表单。

问题：

是否可以通过扩展并使用相同的选择器来覆盖 Angular 中第三方库中的组件？ 如果是这样，实现这一目标的正确方法是什么？ 是否有任何替代方法可以从第 3 方库自定义组件而不创建全新的组件？

Answer 1

不，您不能替换运行时应用程序中库内提供和使用的组件。

这只能在测试场景中启用存根组件。