Как я могу использовать селектор библиотечного компонента? - PullRequest
Новая
       35

Как я могу использовать селектор библиотечного компонента?

0 голосов
/ 05 июля 2019

Я создал библиотеку, которую импортирую в свое приложение по ссылке npm. Библиотека состоит из модуля, который содержит компонент A с селектором с именем app-sqv. В моем приложении у меня есть компонент B и шаблон B. В шаблоне B я хотел бы использовать селектор.

Это, конечно, возможно с внутренним компонентом, но здесь я не могу это сделать, может быть, потому что с внешней библиотекой есть что-то, что я не рассматриваю? Я импортировал компонент 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 голосов
/ 05 июля 2019

Вам необходимо export компонент A в public_api.ts вашей библиотеки. 

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

и import вашего библиотечного модуля в app.module:

import { MyLibraryModule } from 'my-library';

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