简体   繁体   English

Angular2-使用第三个Parety模块的组件

[英]Angular2 - using 3rd parety module's component

I created a module which has a directive in it ( ObDatePickerModule ). 我创建了一个带有指令的模块( ObDatePickerModule )。
Also I created a project which has ObDatePickerModule in it's dependencies (under dependencies in package.json ). 我还创建了一个项目,该项目的依赖ObDatePickerModule中包含ObDatePickerModule (在package.json的依赖项下)。
Next I am importing Module A in my project's module: 接下来,我将模块A导入到我项目的模块中:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {ObDatePickerModule} from 'ng2-date-picker';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ObDatePickerModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Here is the app.component of the project: 这是项目的app.component:

import {Component} from '@angular/core';
import {ObDayPickerComponent} from 'ng2-date-picker';
import * as moment from 'moment';

@Component({
  selector: 'app-root',
  template: '<ob-day-picker [(ngModel)]="date"></ob-day-picker>',
  styleUrls: ['./app.component.css'],
  entryComponents: [ObDayPickerComponent]
})
export class AppComponent {
  date = moment();
}

Here is the error that I am getting: 这是我得到的错误:

main.bundle.js:66421 Unhandled Promise rejection: Template parse errors:
'ob-day-picker' is not a known element:
1. If 'ob-day-picker' is an Angular component, then verify that it is part of this module.
2. If 'ob-day-picker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ob-day-picker [(ngModel)]="date"></ob-day-picker>

I checked that the component name is really ob-day-picker . 我检查了组件名称确实是ob-day-picker

I have also consoled log both the module and the ObDayPickerComponent imports and it seems that the imports are correct. 我还用ObDayPickerComponent记录了模块和ObDayPickerComponent导入的日志,看来导入是正确的。

What did I miss? 我错过了什么?

Checkout the module repo: 签出模块仓库:
https://bitbucket.org/vlio20/ng2-date-picker https://bitbucket.org/vlio20/ng2-date-picker

The project can be found here: 该项目可以在这里找到:
https://github.com/vlio20/3rd-ng2-module https://github.com/vlio20/3rd-ng2-module

If you want to use ObDayPickerComponent outside of ObDatePickerModule you have to export it like: 如果要在ObDayPickerComponent之外使用ObDayPickerComponentObDatePickerModule必须将其导出为:

@NgModule({
  declarations: [
    AppComponent,
    ObDayPickerComponent,
    ObCalendarComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  exports: [ObDayPickerComponent], // this line
  bootstrap: [AppComponent]
})

export class ObDatePickerModule {}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM