Question

Child和Parent都在相同的typescript文件中。孩子没有得到渲染。孩子的构造函数中的警报也没有被触发。但是，当模板被放回父母时，一切正常。

import { Component, Input, ChangeDetectionStrategy, OnInit, NgZone } from '@angular/core';
import { SetupItemViewArgs } from "nativescript-angular/directives";
import { Router, ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { RouterExtensions } from 'nativescript-angular/router/router-extensions';
import { FirebaseService, BackendService } from "../services";


//CHILD
@Component({
  selector: 'roomrow',
  template: `
      <CardView class="studentCard" margin="2" elevation="10" radius="1">
          <GridLayout rows="auto, auto, auto" columns="auto, auto, *">
              <Label [text]="item.id" textWrap="true" stretch="aspectFill" colSpan="3" row="0"></Label>
              <Label [text]="item.name" textWrap="true" row="2" colSpan="1"></Label>
          </GridLayout>
      </CardView>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
class RoomrowComponent {
  @Input() item: any;
  constructor(
    private ngZone: NgZone,
  ) {
    alert(this.item);//not called
  }
}

//PARENT
@Component({
  selector: 'rooms',
   template: `
    <StackLayout>
      <ScrollView>
        <StackLayout>
          <StackLayout *ngFor="let item of (rooms$ | async)">
            <roomrow [item]="item"></roomrow>
          </StackLayout>
        </StackLayout>
     </ScrollView>
  </StackLayout>
   `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RoomsComponent {
  public rooms$: Observable<any>;
  constructor(
    private route: ActivatedRoute,
    private ngZone: NgZone,
    private routerExtensions: RouterExtensions,
    private firebaseService: FirebaseService
  ) {
  }

  ngOnInit() {
    this.rooms$ = <any>this.firebaseService.getPath('users/' + BackendService.token + '/rooms');
  }    
}

Answer 1

它在父模块

中缺少声明

@NgModule({
  imports: [
    NativeScriptModule,
    roomsRouting
  ],
  declarations: [
    RoomrowComponent,//<== Needed
    RoomsComponent
  ]
})
export class RoomsModule { }

并需要将class RoomrowComponent更改为export class RoomrowComponent

未调用子组件

1 个答案: