Мое приложение становится довольно большим, поэтому я пытаюсь разделить свои компоненты на модули, но по какой-то причине я не могу заставить свой компонент истории макросов работать в компоненте, который является частью моего EditMealModalModule. Я экспортирую historyMacroComponent в мой AppModule.

Вот мой 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/EditMealModal.html@18: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>
0
Luca 25 Апр 2017 в 04:07

2 ответа

Лучший ответ

Как указано в информации об ошибке, кажется, что вы вызываете history-macro в EditMealModalModule части. Но history-macro принадлежит AppModule, вам нужно создать SharedModule, которому принадлежит history-macro, и импортировать SharedModule в EditMealModalModule.

< Сильный > ADD:

Submodules может поделиться своими components, импортировав цель submodule.

См. этот живой плункер.

0
Pengyy 25 Апр 2017 в 02:11

Просто замените <history-macro [item]="meal"></history-macro> на <history-macro [attr.item]="meal"></history-macro>, потому что item не является известной характеристикой, ее следует объявлять как атрибут.

0
Duannx 25 Апр 2017 в 06:23