无法绑定属性。 @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，它不被识别为当前组件的已知属性。那怎么样？

  从＆＃39; @ angular / core＆＃39;;

  导入{Component，Input}

  / **

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

  • 组件。 * / @零件（{ 选择器：＆＃39; new＆＃39;， templateUrl：＆＃39; new.html＆＃39; }） export class NewComponent {

    @Input（＆＃39; new-name＆＃39;）name：string; @Input（＆＃39; new-obj＆＃39;）myObj：any;

    text：string;

    constructor（）{ console.log（＆＃39; Hello NewComponent Component＆＃39;）; this.text =＆＃39; Hello World＆＃39 ;; }

  }

new.html

 <ion-card>
   <ion-header>

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

来自控制台的

错误消息：

Answer 1

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

根据您是否使用ionic generate命令创建组件，您需要将ComponentsModule添加到imports中的app.module.ts数组中（如果您使用生成器），或将NewComponent添加到declarations中的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 {}