使用angular 4中其他模块中封装在模块中的组件

Question

我正在开发一个angular 4应用程序，我有两个模块，第一个模块封装了一些我需要在其他模块中使用的功能。例如，我导入了SrCrComponent组件，第一个模块名为SRModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; 

// module imports
import { SrCrComponent} from './sr-cr';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    SrCrComponent
  ],
  declarations: [
    SrCrComponent
  ]
})
export class SRModule {}

我想在另一个模块的其他组件中使用SrCrComponent，但我可以弄清楚如何使用。

在名为ReportsModule的第二个模块中，我在其中导入了SRModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CPComponent } from './cp/cp.component';
import { SRModule } from "../sr-module/sr.module";

@NgModule({
  imports: [
    CommonModule,
    SRModule
  ],
  declarations: [
    CPComponent
  ]
})
export class ReportsModule { }

我的问题是，如何在ReportsModule上使用在CPComponent中声明的SrCrComponent组件？

这是我的CPComponent ts文件：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-chart-period',
  templateUrl: './chart-period.component.html',
  styleUrls: ['./chart-period.component.css']
})
export class CPComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

在我的CPComponent的html中，我有一个sr-gg组件，但没有工作，

<h2> Bar Chart</h2>
<sr-gg></sr-gg>

显然'sr-g' is not a known element in ReportsModule，in fac，这是控制台显示给我的错误，但我不知道我需要在哪里声明，或者当我导入SrCrComponen时，它应该被继承。

Answer 1

ReportsModule导入SRModule，从而导入SRModule中在exports：[]中指出的所有内容，在您的示例中是SrCrComponent。我假设CpComponent应该是ReportsModule的一部分，即CpComponent应该在声明中提到：[]表示ReportsModule。您提到sr-gg作为一个组件，所以如果应该在SrModule中声明sr-gg，那么导出应该类似于导出: SrCrComponent，SrGGComponent

 @NgModule({
      imports: [
         CommonModule
      ],
      exports: [
         SrCrComponent, SrGGComponent
      ],
      declarations: [
        SrCrComponent, SrGGComponent
      ]
})
export class SRModule {}

和

    @NgModule({
      imports: [
        CommonModule,
        SRModule
      ],
      declarations: [
        ReportsComponent,
        ChartPeriodComponent,
        ChartSegmentationComponent,
        CpComponent
      ]

})

export class ReportsModule { }

那么它应该可以工作了。