2017-07-18 65 views
0

子和父都在同一個打字稿文件中。 孩子沒有得到渲染。子構造函數中的警報也沒有被觸發。但是,當模板放回到父母的一切工作正常。未調用子組件

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'); 
    }  
} 

回答

1

它缺少父母的模塊

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

聲明和需要改變class RoomrowComponentexport class RoomrowComponent