Question

我已经建立了一个以Cory Rylan撰写的文章为模型的数据服务，可以在https://coryrylan.com/blog/angular-2-observable-data-services看到。在我的父组件中，我检索“tag $”，如下所示：

private getTag( id: number ) : void {

    // Subscribe to the observable
    this.tags$ = this.tagService.tags$;

    // Filter the observable looking for the tag we are interested in.
    this.tag$ = this.tagService.tags$ 
         .map(tags => tags.find(tag => tag.id === id));

    let criteria = {'parameters': {}, 'nested': [] };

    this.utilityService.buildParameters( criteria.parameters, [
        {
            'column': 'id',
            'comparison_operator': 'equal',
            'value': id
        }
    ]);

    criteria.nested = ['masters','variants','website_products','ebay_products'];

    this.tagService.load( this.utilityService.encode( criteria ) )
    .subscribe( 
        data => {},
        error =>  {

            this.flashService.command.next({message: 'Error: ' + error, type: 'danger'});
        }
    );        
}

然后我将标记$ value传递给子组件：

<tag-form [tag]="tag$ | async"></tag-form>

在我的子控制器中，我正在尝试构建一个反应形式，并将表单的默认值设置为“tag”的值，但我正在努力陷入正确的生命周期事件。

我读过有关ngOnChanges但它似乎被调用两次，第一次标记的值为空。我的孩子看起来像：

export class TagFormComponent implements OnInit {

    @Input() tag;
    tagForm: FormGroup;

    constructor( private formBuilder: FormBuilder ) {}

    ngOnInit() {

        console.log('we are inside onInit');
        console.log( this.tag );
    }

    ngOnChanges() {

        console.log('we are inside onChanges');
        console.log( this.tag );
        this.buildForm();
    }

    reset() {

        this.tagForm.reset();
    }

    private buildForm() {

        this.tagForm = this.formBuilder.group({
            id: [ this.tag.id, 
                [
                ]
            ],
            name: [ this.tag.name, 
                [
                    Validators.required
                ]
            ],
            description: [ this.tag.description,
                [
                    Validators.required
                ]
            ]
        });
    }
}

我怀疑它与|有关异步管道。请问有人可以提供建议吗？

非常感谢。

Angular2：通过父可观察数据服务填充@Input（）时子组件中的生命周期钩子

0 个答案: