Angular2+ - 在多个模块中使用组件答案

【问题标题】：Angular2+ - Using component in multiple modulesAngular2+ - 在多个模块中使用组件
【发布时间】：2020-08-21 17:27:04
【问题描述】：

将一个名为“TemperatureComponent”的组件导入一个名为“DashboardModule”的模块并在那里声明+导出：

import { TemperatureComponent } from './temperature/temperature.component';
import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
//...

@NgModule({
  imports: [
    //...
  ],
  declarations: [
    //...
    TemperatureDraggerComponent,
    TemperatureComponent,
  ],
  exports: [
      TemperatureComponent,
      TemperatureDraggerComponent,
  ]
})
export class DashboardModule { }

在那里工作得很好。我正在尝试使用它的选择器让相同的组件在不同的模块中工作（选择器在 DashboardModule 中也可以正常工作）。我尝试通过导入 DashboardModule 来做到这一点：


import { ThemeModule } from '../../@theme/theme.module';
import { DashboardModule } from '../dashboard/dashboard.module';

@NgModule({
  imports: [
    //...
    DashboardModule,
  ],
})
export class DiceModule { }

然后在第二个模块的 HTML 中，我有如下选择器：

  <div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
    <ngx-status-card [title]="statusCard.title" [type]="statusCard.type">
      <i [ngClass]="statusCard.iconClass"></i>
    </ngx-status-card>
  </div>
</div>

<div class="row">
  <div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
    <ngx-temperature></ngx-temperature>
  </div>
</div>

这给出了错误：

src/app/pages/dice/dice.component.html:11:5 中的错误 - 错误 NG8001： 'ngx-temperature' 不是已知元素：

如果“ngx-temperature”是一个 Angular 组件，则验证它是该模块的一部分。

如果“ngx-temperature”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中禁止显示此消息。

根据要求添加代码：

temperature.component.ts

import { NbThemeService } from '@nebular/theme';
import { Temperature, TemperatureHumidityData } from '../../../@core/data/temperature-humidity';
import { takeWhile } from 'rxjs/operators';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'ngx-temperature',
  styleUrls: ['./temperature.component.scss'],
  templateUrl: './temperature.component.html',
})
export class TemperatureComponent implements OnDestroy {

  private alive = true;

  temperatureData: Temperature;
  temperature: number;
  temperatureOff = false;
  temperatureMode = 'cool';

  humidityData: Temperature;
  humidity: number;
  humidityOff = false;
  humidityMode = 'heat';

  theme: any;
  themeSubscription: any;

  constructor(private themeService: NbThemeService,
              private temperatureHumidityService: TemperatureHumidityData) {
    this.themeService.getJsTheme()
      .pipe(takeWhile(() => this.alive))
      .subscribe(config => {
      this.theme = config.variables.temperature;
    });

    forkJoin(
      this.temperatureHumidityService.getTemperatureData(),
      this.temperatureHumidityService.getHumidityData(),
    )
      .subscribe(([temperatureData, humidityData]: [Temperature, Temperature]) => {
        this.temperatureData = temperatureData;
        this.temperature = this.temperatureData.value;

        this.humidityData = humidityData;
        this.humidity = this.humidityData.value;
      });
  }

  ngOnDestroy() {
    this.alive = false;
  }
}

temperature.component.html

  <nb-tabset fullWidth>

    <nb-tab tabTitle="Temperature">

      <div class="slider-container">
        <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
                                 [min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="theme.arcEmpty"
                                 [fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">

          <div class="slider-value-container"  [ngClass]="{ 'off': temperatureOff }">
            <div class="value temperature h1">
              {{ temperatureOff ? '--' : (temperature | ngxRound) }}
            </div>
            <div class="desc">
              Celsius
            </div>
          </div>
        </ngx-temperature-dragger>
      </div>

      <nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
        <nb-radio value="cool">
          <i class="nb-snowy-circled"></i>
        </nb-radio>
        <nb-radio value="warm">
          <i class="nb-sunny-circled"></i>
        </nb-radio>
        <nb-radio value="heat">
          <i class="nb-flame-circled"></i>
        </nb-radio>
        <nb-radio value="fan">
          <i class="nb-loop-circled"></i>
        </nb-radio>
      </nb-radio-group>
    </nb-tab>

    <nb-tab tabTitle="Humidity">

      <div class="slider-container">
        <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
                                 [min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="theme.arcEmpty"
                                 [fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">

          <div class="slider-value-container"  [ngClass]="{ 'off': humidityOff }">
            <div class="value humidity h1">
              {{ humidityOff ? '--' : (humidity | ngxRound) }}
            </div>
          </div>
        </ngx-temperature-dragger>
      </div>

      <nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
        <nb-radio value="cool">
          <i class="nb-snowy-circled"></i>
        </nb-radio>
        <nb-radio value="warm">
          <i class="nb-sunny-circled"></i>
        </nb-radio>
        <nb-radio value="heat">
          <i class="nb-flame-circled"></i>
        </nb-radio>
        <nb-radio value="fan">
          <i class="nb-loop-circled"></i>
        </nb-radio>
      </nb-radio-group>
    </nb-tab>
  </nb-tabset>
</nb-card>

TL;DR：尝试通过以下方式在模块 A 和 B 之间共享一个组件：

在模块 A 中导入、声明和导出它。
将模块 A 导入模块 B。

为什么选择器不工作，反而给我一个错误？

P.S：这两个模块都被导入到一个名为 Pages 的父模块中。我不确定这是否是一种好的做法，或者是否有任何相关性。

【问题讨论】：

您的代码看起来不错，请也分享 TemperatureComponent 类。
添加了 temperature.component.ts 和 temperature.component.html。
我没有看到任何问题。您是否在 angular.json 文件中将组件选择器前缀修改为 ngx？
"schematics": { "@schematics/angular:component": { "prefix": "ngx", "style": "scss" }, "@schematics/angular:directive": { "prefix": "ngx" } },
是的，你是对的，看起来很奇怪。

标签： angular typescript

【解决方案1】：

我没有将组件 (DiceComponent) 导入第二个模块 (DiceModule)。将代码导入模块后，代码现在可以运行，如下所示：

import {
  NbActionsModule,
  NbButtonModule,
  NbCardModule,
  NbTabsetModule,
  NbUserModule,
  NbRadioModule,
  NbSelectModule,
  NbListModule,
  NbIconModule,
} from '@nebular/theme';
import { NgxEchartsModule } from 'ngx-echarts';

import { ThemeModule } from '../../@theme/theme.module';
import { FormsModule } from '@angular/forms';
import { DiceComponent } from './dice.component'; //<-- this is the line I forgot to add.
import { DashboardModule } from '../dashboard/dashboard.module';

@NgModule({
  imports: [
    FormsModule,
    ThemeModule,
    NbCardModule,
    NbUserModule,
    NbButtonModule,
    NbTabsetModule,
    NbActionsModule,
    NbRadioModule,
    NbSelectModule,
    NbListModule,
    NbIconModule,
    NbButtonModule,
    NgxEchartsModule,
    DashboardModule,
  ],
  declarations: [
    DiceComponent, // <-- Component declared as required.
  ],
})
export class DiceModule { }

【讨论】：