angular - 当一个指令位于Angular 6中的另一个指令内时，工作指令的生命周期顺序如何？

Question

在组件中，我有两个指令：

@Directive({
    selector: '[ng-parent]'
})
export class Parent implements OnInit, AfterViewInit {
    public ngOnInit(): void {           
        console.log('parent.directive:ngOnInit');
    }

    ngAfterViewInit() {
        console.log('parent.directive:ngAfterViewInit');
    }
}

@Directive({
    selector: '[ng-child]'
})
export class Child implements OnInit, AfterViewInit {
    public ngOnInit(): void {           
        console.log('child.directive:ngOnInit');
    }

    ngAfterViewInit() {
        console.log('child.directive:ngAfterViewInit');
    }
}

在main.component我使用这样的指令时：

<div ngParent>
    <ng-template ngFor let-row [ngForOf]="arrRows">
        <div>
            <ng-template ngFor let-field [ngForOf]="arrFields">
                <div ngChild></div>
            </ng-template>
        </div>
    </ng-template>
</div>

控制台显示结果初始化序列：

main.component:ngOnInit
ng-parent.directive:ngOnInit
ng-parent.directive:ngAfterViewInit
main.component:ngAfterViewInit
ng-child.directive:ngOnInit
ng-child.directive:ngAfterViewInit

我简化代码。我猜问题ng-template在ng-template. 据我了解，生命周期顺序应该不同。我需要这样的结果初始化生命周期指令序列：

    main.component:ngOnInit
    ng-parent.directive:ngOnInit
    ng-child.directive:ngOnInit
    ng-child.directive:ngAfterViewInit
    ng-parent.directive:ngAfterViewInit
    main.component:ngAfterViewInit

标签： angularangular6