Question

好的，我们说我有简单的HTML

<foo name="outter-1">

  <foo name="inner-1-1"></foo>
  <foo name="inner-1-2"></foo>

</foo>
<foo name="outter-2">

  <foo name="inner-2-1"></foo>
  <foo name="inner-2-2"></foo>

</foo>

指令foo

import {Directive, Input, OnInit} from 'angular2/core';

@Directive({
  selector: 'foo'
})
export class FooDirective implements OnInit{
    @Input()
    public name:string;

    constructor () {}

    ngOnInit() {
        console.log('OPEN', this.name);
    }

    ngAfterViewInit() {
        console.log('CLOSE', this.name);
    }
}

哪个应该＆＃34;遍历＆＃34;我的组件模板，并通知我结构。我得到的是：

OPEN outter-1
OPEN inner-1-1
OPEN inner-1-2
OPEN outter-2
OPEN inner-2-1
OPEN inner-2-2
CLOSE inner-2-2
CLOSE inner-2-1
CLOSE outter-2
CLOSE inner-1-2
CLOSE inner-1-1
CLOSE outter-1

哪不是真的，我需要得到如下结果：

OPEN outter-1
OPEN inner-1-1
CLOSE inner-1-1
OPEN inner-1-2
CLOSE inner-1-2
CLOSE outter-1
OPEN outter-2
OPEN inner-2-1
CLOSE inner-2-1
OPEN inner-2-2
CLOSE inner-2-2
CLOSE outter-2

ngOnInit完成了它的工作，但ngAfterViewInit没有。

在角度1.x中，我会使用preLink和postLink，但在这里我不确定是否有可能得到我需要的东西。

我已经尝试了所有＆＃34; Lifecycle Hooks＆＃34; （https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html）但其中一些似乎只与组件一起工作..

这是一个Plunker： http://plnkr.co/edit/QqScXKAo755ae8Vtfy03?p=preview

＆＃34; postLink＆＃34; Angular 2中的方法

0 个答案: