9

我创建了一个 Angular 库，但我想导出一个我的应用程序可以使用的模型。我怎样才能做到这一点 ？

例如 ：

我的图书馆

库-model.ts

export class LibraryModel{
  //some model data
}

我的库.component.ts

import { Component, OnInit, Input } from '@angular/core';

//some imports    

@Component( {
    selector: '...',
    templateUrl: '...',
    styleUrls: [...]
} )
export class MyLibraryComponent implements OnInit {

    @Input() libInputData: LibraryModel;

    // some other codes
}

我的库.module.ts

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

import { MyLibraryComponent} from './my-library.component';
import { LibraryModel} from './library-model';

@NgModule( {
    declarations: [MyLibraryComponent, LibraryModel],
    imports: [
        BrowserModule
    ],
    exports: [MyLibraryComponent, LibraryModel]
} )
export class MyLibraryModule { }

public_api.ts

export * from './lib/my-library.service';
export * from './lib/my-library.component';
export * from './lib/my-library.module';
export * from './lib/library-model';

我的应用

app.component.ts

import { Component } from '@angular/core';
import { LibraryModel } from 'my-library';

@Component({
  selector: 'grc-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-application';

  libraryModel : LibraryModel ;

  initializeData() {

     //initialize and set data for libraryModel 

  }
}

app.component.html

<my-lib-component libInputData="libraryModel" ></my-lib-component>

但是，使用此设置，我在构建库期间收到“无法导出值 LibraryModel ...”错误。我想使用 LibraryModel，这样我就可以轻松地在 app.component.html 中传递数据。我怎样才能做到这一点？

4

2 回答 2

4

你不能声明/导出它，它是一个模型，简单的非角度类不是 a component，从两个数组（declarations& exports）中删除它。它已经由 导出export class LibraryModel。

不要声明以下内容：

  • 已经在另一个 NgModule 中声明的类
  • 从另一个包导入的指令数组。例如，不要从 @angular/forms 声明 FORMS_DIRECTIVES
  • NgModule 类
  • 服务等级
  • 非 Angular 类和对象，例如字符串、数字、函数、实体模型、配置、业务逻辑和助手类

MDN。

不要声明（官方文档）。

于 2018-12-26T14:04:18.330 回答
0
  1. LibraryModel从您的声明和出口中删除“ ”my-library.module.ts
  2. 确保它被导出到public_api.ts
  3. 确保库导入 URL 在您的组件中正确。

例如

对：import { MenuItemsModel } from 'dist/ngx-circular-menu';

错误：import { MenuItemsModel } from 'dist/ngx-circular-menu/lib/menu-items.model';

而已！

于 2022-01-21T17:51:23.723 回答