ionic-framework - 无法绑定属性。@Input 失败的赌注。父子组件

Question

我在将属性从父级绑定到子级时遇到困难

这是我的home.ts（父母）

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NewComponent } from '../../components/new/new'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  oneObject = {content: "Card content"}
  constructor(public navCtrl: NavController) {

  }

}

和home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <new new-name="some name" [new-obj]="oneObject"></new>
  <new new-name="some name 2" ></new>

  <new new-name="some name 4" ></new>

</ion-content>

这是我的new.ts（子组件）

• 此问题来自未识别为当前组件上的已知属性的 new-obj。那个怎么样？

  从'@angular/core'导入{组件，输入}；

  /**

  • 为 NewComponent 组件生成的类。*
  • 有关Angular 的更多信息，请参阅https://angular.io/api/core/Component

  • 成分。*/ @Component({ selector: 'new', templateUrl: 'new.html' }) 导出类 NewComponent {

    @Input('new-name') 名称：字符串；@Input('new-obj') myObj:any;

    文本：字符串；

    constructor() { console.log('Hello NewComponent 组件'); this.text = 'Hello World'; }

  }

新的.html

 <ion-card>
   <ion-header>

   </ion-header>
   <ion-card-content>
      {{ name }} 
      {{ **myObj?.content }**}
   </ion-card-content>
 </ion-card>

来自控制台的错误消息：

Answer 1

您需要将组件或组件模块导入主应用程序模块。

根据您是否使用ionic generate命令创建组件，您需要添加ComponentsModule到imports数组 in app.module.ts（如果您使用生成器），或者添加NewComponent到declarations数组 in app.module.ts（如果您没有使用生成器）

在后一种情况下，您的应用程序模块文件看起来像

app.module.ts

import { HomePage } from '../pages/home/home';
import { NewComponent } from '../components/new/new';
import { MyApp } from './app.component';

@NgModule({
  bootstrap: [ IonicApp ],
  declarations: [ MyApp, HomePage, NewComponent ],
  entryComponents: [ HomePage ],
  imports: [ BrowserModule, IonicModule.forRoot(MyApp) ],
  providers: [ StatusBar, SplashScreen, IonicErrorHandler ],
})
export class AppModule {}