如何在其标签位于"*ngIf = true"时初始化组件？

Question

更新:
GünterZöchbauer提供了一个非常可接受的答案,完美无缺(谢谢!).但是我仍然有一个问题要检查我所做的是否是获得我所寻求的结果的正确方法.上下文给出了上下文.
我对父视图上的自定义标记的期望是,当*ngIf条件为假时,组件根本不加载(或者可能大部分加载).是否正常,即使它不在DOM中(因为条件为假),它仍然被加载？有没有更好的方法将组件的模板(及其类的逻辑)嵌入到父组件的模板中？

原帖

我是Angular 2的新手,到目前为止,我在开发基于Spotify API的小型歌曲曲目元数据应用程序方面非常有趣.

TL; DR:如何仅在其对应的HTML标记(用selector属性定义@Component)时才初始化组件*ngIf="true"？

---

但我当然面临困难!我有这个组件,TrackDetailComponent在模板中我想包括2个其他组件.单击按钮时,它将从一个内部组件切换到另一个内部组件.
这是模板的样子(注意我现在只开发了两个内部组件之一,所以我使用了占位符而不是第二个):

<div id="view">
    <tig-track-info *ngIf="childView == TrackDetailView.InfoView" [track]="track"></tig-track-info>
    <p *ngIf="childView == TrackDetailView.LyricsView">Here go the lyrics</p>
</div>

如您所见,我的内部组件(命名TrackInfoComponent)有一个输入参数.以下是该组件的摘录:

@Component({
    selector: "tig-track-info",
    templateUrl: "app/components/track-info/track-info.component.html",
    styleUrls: ["app/components/track-info/track-info.component.css",
                "app/shared/animations.css"]
})
export class TrackInfoComponent implements OnInit {
    private _trackId: string = null;
    @Input() 
    track: Track = null;
    previewAudio: any = null; // The Audio object is not yet defined in TypeScript
    albumArtworkLoaded: boolean = false;
    ...
}

我真正的问题不是嵌入TrackInfoComponent另一个内部,而是同步它们.该TrackDetailComponent调用的API异步,然后初始化track属性.但是TrackInfoComponent还需要track初始化才能完成它的工作,否则我得到一个空引用异常(这是合乎逻辑的).

我尝试将子组件数据ngOnInit()设置*ngIf为并将其父模板的设置设置为true,只有当track它准备就绪时,它似乎立即ngOnInit()被调用,即使DOM元素tig-track-info没有显示*ngIf.

我想我可以在子组件中使用事件或我自己的init方法,只有在我准备好时调用,但我想知道是否有更好的方法来使用Angular 2组件生命周期钩子或任何其他为此推荐的方法.有没有人对此有任何想法？

谢谢 :-)

Answer 1

您可以使用OnChanges,只要@Input()通过模板绑定"[track] ="..."更改属性值,就会调用OnChanges

  export class TrackInfoComponent implements OnChanges {
    ngOnChanges(changes: SimpleChanges) {
      if(this.track) {
        ...
      }
    }
  }