Angular5 - Селектор не рисует component.html при вызове из другого компонента

Question

Итак, у меня есть два компонента, ChartsComponent (отображает графики) и DataComponent (отображает диаграммы среди других данных, таблиц и т. Д.).

Файловая система будет выглядеть так:

приложение / графики /

приложение / объекты / данные /

ChartsComponent визуализируется успешно, когда отображается на своей собственной странице с собственным маршрутом. DataComponent работает, но не может отобразить ChartsComponent через селектор. Консоль не отображает ошибок вообще. Я попытался вызвать селектор ChartsComponent в DataComponent следующим образом:

data.component.html

<chart-data></chart-data>

charts.component.html

<div [chart]="chart1"></div>

charts.component.ts

import { Component, OnInit} from '@angular/core';
import { Chart } from 'angular-highcharts';
//I'm loading data into the chart statically for trial
import { jsonData} from '../json-data/chart-data';

@Component({
  selector: 'chart-data',
  templateUrl: './charts.component.html'
})
export class ChartsComponent implements OnInit{

  //Chart
  chart1: Chart;
  countries: any;
  num: any;
  chartData: any;

  constructor() {
    this.barChart();
  }

  ngOnInit(){}

  barChart(){
    this.chartData = jsonData;
    this.chart1 = new Chart(this.chartData);
  }
}

data.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import { DataService } from './provision.service';
import { ChartsComponent } from '../../charts/charts.component';

@Component({
    selector: 'data-page',
    templateUrl: './data.component.html'
})

export class DataComponent implements OnInit, OnDestroy {

}

charts.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ChartsComponent } from './';

@NgModule({
    declarations: [
        ChartsComponent
    ],
    exports: [
        ChartsComponent
    ]
})

export class ChartsModule {}

data.module.ts

import { RouterModule } from '@angular/router';
import { ChartsModule } from '../../charts';
import { ChartsComponent } from '../../charts/charts.component';

import {
    DataService,
    DataComponent,
    DataRoute
} from './';

@NgModule({
    imports: [],
    declarations: [DataComponent],
    entryComponents: [
        DataComponent,
        ChartsComponent
    ],
    providers: [
        DataService
    ]
})
export class DataModule {}

графиков / index.ts

export * from './charts.component';
export * from './charts.module';
export * from './charts.route';

app.module.ts

import './vendor.ts';

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { Ng2Webstorage, LocalStorageService, SessionStorageService  } from 'ngx-webstorage';
import { EventManager } from 'ng-blahblah';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartModule } from 'angular-highcharts';
import { ChartsComponent } from './charts';


import { AuthInterceptor } from './blocks/interceptor/auth.interceptor';
import { AuthExpiredInterceptor } from './blocks/interceptor/auth-expired.interceptor';
import { ErrorHandlerInterceptor } from './blocks/interceptor/errorhandler.interceptor';
import { NotificationInterceptor } from './blocks/interceptor/notification.interceptor';
import { SharedModule, UserRouteAccessService } from './shared';
import { AppRoutingModule} from './app-routing.module';
import { HomeModule } from './home/home.module';
import { AdminModule } from './admin/admin.module';
import { AccountModule } from './account/account.module';
import { EntityModule } from './entities/entity.module';
import { PaginationConfig } from './blocks/config/uib-pagination.config';
import {
    MainComponent,
    NavbarComponent,
    FooterComponent,
    ProfileService,
    PageRibbonComponent,
    ActiveMenuDirective,
    ErrorComponent
} from './layouts';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        SharedModule,
        HomeModule
        EntityModule,
        ChartModule
    ],
    declarations: [
        MainComponent,
        NavbarComponent,
        ErrorComponent,
        PageRibbonComponent,
        ActiveMenuDirective,
        FooterComponent,
        ChartsComponent
    ],
    providers: [
        ProfileService,
        PaginationConfig,
        UserRouteAccessService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true,
            deps: [
                LocalStorageService,
                SessionStorageService
            ]
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthExpiredInterceptor,
            multi: true,
            deps: [
                Injector
            ]
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: ErrorHandlerInterceptor,
            multi: true,
            deps: [
                EventManager
            ]
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: NotificationInterceptor,
            multi: true,
            deps: [
                Injector
            ]
        },
        /*{
            provide: NgbDateParserFormatter,
            useFactory: () => { return new NgbDateMomentParserFormatter("DD-MM-YYYY") }
        }*/
    ],
    bootstrap: [ MainComponent ]
})
export class AppModule {}

Я думаю, что это все, что имеет значение, если бы кто-то мог объяснить, что случилось, что пропало и почему, это было бы очень полезно. Тем временем я попытаюсь лучше документировать себя в модуле / системе импорта.

Answer 1

Хорошо, в общем, файл module.ts, в который вы собираетесь импортировать ChartsComponent и ChartModule (здесь мы говорим о высоких диаграммах), должен также экспортировать ChartsComponent.

Импортируйте оба, затем в NgModule импортируйте ChartModule, а также в декларации и экспортируйте тег ChartsComponent. По назначению data.module импортируйте ChartsComponent и пометьте его в NgModule - entryComponents. По назначению DataComponent импортируйте ChartsComponent.