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（）项批注来指定它。这使我相信home组件无法访问delete-item组件作为其模块的一部分，但是为什么会这样，因为它已在app模块中列出？

Answer 1

JB在评论中提到，这些父组件和子组件位于两个不同的模块中，您需要将它们放在同一模块上，以消除此错误。

将 HomePage 组件移至 AppModule 或以任何一种方式。或使用共享模块并导出删除组件。

在Angular版本8.1.2中绑定到子组件的属性

1 个答案: