如何使用库组件的选择器？

Question

我创建了一个库，我通过 npm 链接将其导入到我的应用程序中。该库由一个模块组成，该模块包含组件 A 和一个名为 app-sqv 的选择器。 在我的应用程序中，我有组件 B 和模板 B。在模板 B 中，我想使用选择器。

这当然可以通过内部组件实现，但在这里我无法做到这一点，也许是因为使用外部库有一些我没有考虑的东西？ 我已经使用经典的 import 语句将组件 A 导入到组件 B 中。我也可以使用该组件中的功能，所以我排除了导入错误。

模块A.ts：

import { NgModule, } from '@angular/core';
import { AppSqvComponent } from './app-sqv.component';
@NgModule({
    imports: [],
    exports: [AppSqvComponent],
    declarations: [AppSqvComponent],
    providers: [],
})
export class EmptyTextModule { }

ComponentA.ts：

@Component({
    selector:    'app-sqv',
    templateUrl: './app-sqv.component.html',
    providers:  []
})

export class AppSqvComponent { .. }

ModuleB.ts：

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

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent

  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ComponentB.ts

import {AppSqvComponent} from 'node_modules/viewseq';

模板B.html

<div>
  <h1>
    Testing Library!
  </h1>
  <app-sqv></app-sqv>
</div>

组件B无法识别选择器app-sqv的错误状态。

Answer 1

您需要在您的库的 public_api.ts 中 export 组件 A。

export * from './lib/ComponentA/component-A.component';

和import你在app.module中的库模块：

import { MyLibraryModule } from 'my-library';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MyLibraryModule 
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})