angular - Angular2+ - 在多个模块中使用组件
问题描述
将名为“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”以禁止显示此消息。
根据要求的附加代码:
温度组件.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;
}
}
温度.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。
为什么选择器不工作,而是给我一个错误?
PS:这两个模块都被导入到一个名为 Pages 的父模块中。我不确定这是否是好的做法,或者是否有任何相关性。
解决方案
我没有将组件 (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 { }
推荐阅读
- python - PyQt5 代码无法在 linux 上打开第二个窗口
- python - H14 通过 Heroku 上的 Docker 使用 Postgres 部署 FastAPI 时没有运行 Web 进程
- android - Fluxstore Multivendor 添加两个或多个类别 ID
- windows - 如何使非高架外壳的 PowerShell 功能永久化?
- wpf - 什么是 WebViewControlProcess?以及如何在 webview 中使用它?
- amazon-web-services - Amazon MWAA Airflow - 任务容器关闭/停止/杀死而没有日志
- reactjs - Next.js 路由器在第一次渲染时返回未定义的查询参数?
- javascript - 从 GitHub url 获取 repo 名称和 pull number
- php - Laravel 8:在 null 上调用成员函数中间件()
- c# - 在 .Net Core 中替换 AppDomain.CreateDomain