Question

我有两个组件＆＃39; ItemComponent＆＃39;和＆＃39; ItemForm＆＃39;我需要从＆＃39; ItemComponent＆＃39;中传递从http调用中检索到的对象。到了项目形式＆＃39;。

ItemComponent

@Component({
    selector: 'item',
    templateUrl: 'templates/item.html',
    directives: [ItemForm]
})

export class ItemComponent implements OnInit {

    private routeParams: RouteParams;

    item: Item;

    title: String;

    constructor(
        private _service: ItemService,
        routeParams: RouteParams) {
        this.routeParams = routeParams;
    }

    fetch() {
        this._service.get(this.routeParams.get('id')).subscribe(item => {
                this.item = item
            },
            error => {
            console.log(error);
        });
    }

    ngOnInit() {

        if(this.routeParams.get('id')) {
            this.title = "Update Item";
            this.fetch();
        }
        else {
            this.title = "Add Item"
        }
    }
}

和ItemForm

 @Component({
        selector: 'item-form',
        templateUrl: `<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<input type="text [(ngModel)]="item.title">
</form>`
    })

    export class ItemFormComponent implements OnInit {
        @Input() item: Item;

        private mode: String;
        private service: ItemService;

        constructor(service: ItemService, routeParams: RouteParams) {
            this.service = service;
            this.routeParams = routeParams;

            if(this.routeParams.get('id')) {
                this.mode = "edit";
            }
            else {
                this.mode = "create";
            }
        }

        onSubmit($form) {
            console.info("Mode", this.mode);

            if ($form.form.valid) {
            }
        }

        ngOnInit() {
           console.log(this.item);
        }
    }

ItemFormComponent中的item对象是未定义的，尽管它已传递给组件

<item-form [item]='item'></item-form>

我知道我做错了什么，我不知道是什么。

Answer 1

您开始在ngOnInit()的{{1}}中抓取并检入ItemComponent的{{1}}。无法保证（实际上，当ngOnInit()运行时，服务器的响应很可能已经返回。

您可以在ItemFormComponent中实施OnChanges，以便在值到达时收到通知。

ngOnInit()

将对象从服务器从父组件传递到子组件angular2

1 个答案: