Angular2：從模板訪問子節點

Question

我有一個組件，我想從模板中訪問一些子節點。我達到了訪問details股利，但我不知道爲什麼代碼的作品。 Future class究竟是什麼？爲什麼第一行輸出爲空？這是從模板訪問子節點的正確方法嗎？

@Component(selector: 'hero-detail', template: '<div #details></div>') 
class HeroDetailComponent implements OnInit { 
    Hero hero; 

    @ViewChild('details') 
    var details; 

    Future ngOnInit() async { 
    // why this command prints null? 
    print(details); 
    // why this command prints "Instance of 'ElementRef_'" 
    new Future(() => print(details)); 
    } 
} 

Answer 1

@Component(selector: 'hero-detail', template: '<div #details></div>') 
class HeroDetailComponent implements OnInit { 
    Hero hero; 


    // Angular generates additional code that looks up the element 
    // from the template that has a template variable `#details 
    // and assigns it to `var details` 
    @ViewChild('details') 
    var details; 

    // I don't think Future does anything here. 
    Future ngOnInit() async { 
    // why this command prints null? 

    // this is too early. `@ViewChild()` is only set in `ngAfterViewInit` 
    // at this point the view is not yet fully created and therefore 
    // `#details can't have been looked up yet 
    print(details); 
    // why this command prints "Instance of 'ElementRef_'" 

    // this delays `print(details)` until the next Dart event loop 
    // and `details` is then already lookup up and assigned 
    new Future(() => print(details)); 
    } 

    // this is the right place 
    // needs `class HeroDetailComponent implements OnInit, AfterViewInit { 
    ngAfterViewInit() { 
    print(details); 
    } 
}