Привязка к свойству дочернего компонента в Angular версии 8.1.2

Question

У меня есть родительский компонент, home , у которого есть дочерний компонент, delete-item . Я пытаюсь передать строку из родительского компонента (home) в дочерний компонент (delete-item).

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// Including the delete-item component
import { DeleteItemComponent } from './components/delete-item/delete-item.component';

@NgModule({
  declarations: [
    AppComponent,
    DeleteItemComponent
  ],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
  exports: []
})
export class AppModule {}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    NgbModule
  ],
  declarations: [
    HomePage
  ]
})
export class HomePageModule {}

home.page.ts

import { Component, OnInit } from '@angular/core';
import { ItemsService } from '../items.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  private items: Array<string>;
  private itemToAdd: string;

  constructor(private itemsService: ItemsService) {
  }

  ngOnInit() {
    this.items = [];

    this.itemsService.getItems().subscribe(
      (result) => {
        this.items = result;
      }, (err) => {
        alert(err);
      }
    );
  }

home.page.html

<div *ngFor='let i of items'>
    {{i}}<app-delete-item [item]="i"></app-delete-item>
</div>

delete-item.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ItemsService } from 'src/app/items.service';

@Component({
  selector: 'app-delete-item',
  templateUrl: './delete-item.component.html',
  styleUrls: ['./delete-item.component.scss'],
})
export class DeleteItemComponent implements OnInit {
  @Input() item: string;

  constructor(private itemsService: ItemsService) { }

  ngOnInit() {}

  /**
   * Calls for the item to be deleted once clicked.
   */
  private clickDeleteItem(): void {
      this.itemsService.deleteItem(this.item);
  }
}

delete-item.component.html

<button (click)='clickDeleteItem()'>Delete</button>

При переходе на домашнюю страницу появляется следующая ошибка:

Uncaught (in promise): Error: Template parse errors:
Can't bind to 'item' since it isn't a known property of 'app-delete-item'.

Компонент delete-item имеет атрибут item', потому что я использовал аннотацию @ Input () item , чтобы указать его. Это заставляет меня поверить, что домашний компонент не имеет доступа к компоненту delete-item как части его модуля, но почему это так, поскольку он указан в модуле приложения?

Answer 1

Как упомянул JB в комментарии, эти родительские и дочерние компоненты находятся в двух разных модулях, чтобы избавиться от этой ошибки, они должны быть в одном и том же модуле.

Любой шаг HomePage компонент до AppModule или в любом случае. Или используйте общий модуль и удалите компонент экспорта.