0
我的应用程序越来越大，所以我试图将组件分离到模块，但由于某些原因我无法获取我的历史宏组件在我的EditMealModalModule之外的组件中工作。我正在导出我的AppModule中的historyMacroComponent。无法绑定到'item'，因为它不是'history-macro'的已知属性
这里是我的AppModule.ts：
@NgModule({
declarations: [
MyApp,
Home,
ProgressComponent,
SettingsModal,
VisualizeModal,
EducationModal,
AddMealsModal,
ShowMealModal,
AddMacrosModal,
VisualizeMacroModal,
MealsModal,
WeightPage,
TabsPage,
WlTrackerComponent,
CalorieTrackingComponent,
PieGraphComponent,
HistoryItemComponent,
HistoryMacroComponent,
LegendItemComponent,
MacroModeComponent,
LazyKetoModeComponent,
SavedMealIconComponent,
DayActionsComponent,
MacroSummaryComponent,
MealComponent,
Filter
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
scrollAssist: true,
autoFocusAssist: true
}),
IonicStorageModule.forRoot(),
FormsModule,
EditMealModalModule,
EditMacroModalModule,
MonthlySuccessModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Home,
WeightPage,
TabsPage
],
providers: [
{
provide: ErrorHandler,
useClass: RavenErrorHandler
},
Day,
Carbs,
Database,
Weight,
PageManager,
Analytics,
Meals
],
exports: [
HistoryMacroComponent
]
})
export class AppModule {
}
这里是我的EditMealModalModule.ts：
@NgModule({
declarations: [
EditMacroModal
],
imports: [
IonicPageModule.forChild(EditMacroModal)
],
exports: [
EditMacroModal
]
})
export class EditMacroModalModule {}
这里是我的HistoryMacroComponent.ts：
import { Component, Input } from '@angular/core';
import { MacroRecord } from '../../providers/carbs';
import { Day } from '../../providers/day';
@Component({
selector: 'history-macro',
templateUrl: 'history-macro.html'
})
export class HistoryMacroComponent {
@Input() item: MacroRecord;
constructor(public dayService: Day) {
}
}
HistoryMacroComponent.html ：
<div class="history-item">
<saved-meal-icon [title]="item.title"></saved-meal-icon>
<div class="history-macro-legends">
<div class="history-macro-legends-first">
<legend-item colour="#0eabd8" [amount]="item.count" unit="g"></legend-item>
<legend-item colour="#ec226c" [amount]="item.fat" unit="g"></legend-item>
</div>
<div>
<legend-item colour="#58c912" [amount]="item.protein" unit="g"></legend-item>
<legend-item colour="#ffc105" [amount]="item.calories" unit="kcal"></legend-item>
</div>
</div>
<span class="history-ago">{{dayService.dateToTime(item.timestamp) }}</span>
</div>
EditMealModal.ts：
import { Component } from '@angular/core';
import { IonicPage, NavParams, ViewController } from 'ionic-angular';
import { Analytics } from "../../providers/analytics";
import { Validators, FormGroup, FormBuilder } from "@angular/forms";
import {MealRecord, Meals} from "../../providers/meals";
@IonicPage()
@Component({
selector: 'page-edit-meal-modal',
templateUrl: 'edit-meal-modal.html',
})
export class EditMealModal {
public form: FormGroup;
constructor(public params: NavParams,
private viewCtrl: ViewController,
private fb: FormBuilder,
private mealsService: Meals,
private analytics: Analytics) {
this.analytics.trackView(`Edit Meal Page`);
}
public ngOnInit() {
const form = {
title: [null, Validators.required],
carbs: [null],
fat: [null],
protein: [null],
details: [null],
calories: [null]
};
this.form = this.fb.group(form);
this.setMeal();
}
public dismiss(): void {
this.viewCtrl.dismiss();
}
public get meal(): MealRecord {
return {
title: this.form.value.title,
carbs: parseInt(this.form.value.carbs),
details: this.form.value.details,
calories: parseInt(this.form.value.calories),
fat: parseInt(this.form.value.fat),
protein: parseInt(this.form.value.protein),
timestamp: this.params.data.timestamp
};
}
public editRecord(e): void {
e.preventDefault();
if (!this.form.valid) {
return;
}
this.mealsService.editMeal(this.meal);
this.viewCtrl.dismiss();
}
private setMeal(meal: any = this.params.data): void {
if (!meal) {
this.dismiss();
return;
}
this.form.patchValue({ title: meal.title });
this.form.patchValue({ details: meal.details });
this.form.patchValue({ carbs: meal.carbs || meal.count });
this.form.patchValue({ fat: meal.fat });
this.form.patchValue({ calories: meal.calories });
this.form.patchValue({ protein: meal.protein });
}
}
EditMealModal.html：
<ion-header>
<ion-toolbar>
<ion-title>
Edit Meal
</ion-title>
<ion-buttons start>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Cancel</span>
<ion-icon name="md-close" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="edit-meal-page">
<ion-card>
<ion-card-content text-center>
<history-macro [item]="meal"></history-macro>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content text-center>
Title is required.
</ion-card-content>
</ion-card>
<form class="edit-form" autocomplete="off" novalidate [formGroup]="form">
<ion-list margin-right>
<ion-item class="ios-ion-input-fix">
<ion-label>Title:</ion-label>
<ion-input name="title" type="text" formControlName="title" placeholder="Bacon and Eggs"></ion-input>
</ion-item>
<ion-item>
<ion-label>Carbs:</ion-label>
<ion-input name="carbs" type="number" formControlName="carbs"></ion-input>
</ion-item>
<ion-item>
<ion-label>Fat:</ion-label>
<ion-input name="carbs" type="number" formControlName="fat"></ion-input>
</ion-item>
<ion-item>
<ion-label>Protein:</ion-label>
<ion-input name="carbs" type="number" formControlName="protein"></ion-input>
</ion-item>
<ion-item>
<ion-label>Calories:</ion-label>
<ion-input name="calories" type="number" formControlName="calories"></ion-input>
</ion-item>
<ion-item class="ion-input-fix">
<ion-label>Details:</ion-label>
<ion-input name="details" type="text" formControlName="details" placeholder="3 pieces of bacon, 2 eggs"></ion-input>
</ion-item>
</ion-list>
<div padding>
<button ion-button block type="submit" (click)="editRecord($event)">Save Changes</button>
</div>
</form>
</ion-content>
我已经通过的文件中多次阅读，我仍然无法弄清楚。希望有人能帮助！
我得到的错误是：
Can't bind to 'item' since it isn't a known property of 'history-macro'.
1. If 'history-macro' is an Angular component and it has 'item' input, then verify that it is part of this module.
2. If 'history-macro' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<ion-card>
<ion-card-content text-center>
<history-macro [ERROR ->][item]="meal"></history-macro>
</ion-card-content>
</ion-card>
"): ng:///EditMealModalModule/[email protected]:21
'history-macro' is not a known element:
1. If 'history-macro' is an Angular component, then verify that it is part of this module.
2. If 'history-macro' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-card>
<ion-card-content text-center>
[ERROR ->]<history-macro [item]="meal"></history-macro>
</ion-card-content>
</ion-card>
请寄'history-macro'代码。 – Pengyy
我刚刚添加它 – Luca
也发布错误发生的相关代码。 – Pengyy