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

时间:2019-07-05 07:51:00

标签: angular typescript templates module components

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

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

ModuleA.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';

TemplateB.html

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

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

1 个答案:

答案 0 :(得分:0)

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

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

import在app.module中的库模块:

import { MyLibraryModule } from 'my-library';

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