Question

我开发了一个标题组件，需要数据为＆＃34; IHeader＆＃34;输入

header.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';


@NgModule({
  imports: [
      CommonModule
  ],
  declarations: [
      HeaderComponent       
  ],
  providers: [ ],
  exports: [
    HeaderComponent
  ]

})
export class HeaderModule { }

IHeader.ts

export interface IHeader {
    headerName: string;
    headerTitle: string;   
    headerVisible: boolean;
    headerAttributes:IheaderAttributes;
    headerType:string;
}

header.component.ts

export class HeaderComponent implements OnInit {

    @Input() data: IHeader;

}

如何导出＆＃34; IHeader＆＃34;界面？

其他信息

我创建了这个模块，其他内部产品可以使用＆＃34; npm install ...＆＃34;作为节点模块安装。开发人员可以在其产品中导入组件，但如何限制用户以特定格式传递数据？

Answer 1

这是导出界面
的方法

示例：

// car interface
// '?' shows that this property is optional
export interface car {
  isCar?: boolean; 
  wheels?: number;
  engine?: string;
  engineType?: string;
}

您需要添加 export 关键字以将该界面导出到其他组件。

假设您需要将此界面导入另一个组件... 然后，您可以参考以下代码：

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

// import interface named car
import { car } from '@app/car.component';

@Component({
  selector: 'app-car-collection',
  templateUrl: './carCollection.component.html'
})
export class HyundaiCarComponent implements OnInit {

  // Here.. You can give HyundaiCar variable of type car
  HyundaiCar: car = {

   isCar= true,
   wheels= 4,
   engine= '4-stroke',
   engineType= 'petrol'  
  };

  constructor() {}

  ngOnInit(): void {}
}

Answer 2

如果要构建角度库/程序包，请选中此article。

您应该能够将界面导出到interface_api.ts文件中。请注意，使用此技巧，您需要在模块/组件/服务中导入接口定义。但是优点是您的功能模块将依赖于库，因此功能模块可在其他项目中重用。

因此，您可以从库（角度包）中导入接口定义，而无需依赖项目中的文件夹结构。

希望它可以为您提供帮助。

Angular 2 Component - 如何导出界面？

2 个答案: