如何仅在组件的标签为`*ngIf=true '时初始化组件？

Question

更新：
君特·佐赫鲍尔提供了一个非常可以接受的答案，效果很好（谢谢！但我仍然有一个问题要检查我正在做的事情是否是获得我所寻求的结果的正确方法。背景如下。
我对父视图上的自定义标记的期望是，当 *ngIf 条件为 false 时，根本不加载组件（或者可能是大部分）。即使它不在 DOM 中（因为条件为 false），它仍然被加载是正常的吗？有没有更好的方法将组件的模板（及其类的逻辑）嵌入到父组件的模板中？

我是Angular 2的新手，到目前为止，我非常喜欢开发基于Spotify API的小型歌曲轨道元数据应用程序。

TL；DR:如何仅在组件对应的HTML标签(用< code>@Component的< code>selector属性定义)if *ngIf="true"时初始化组件？

但是我当然面临困难！我有这个组件，TrackDetailComponent，我想在模板中包含另外两个组件。单击按钮时，它会从一个内部组件切换到另一个。
以下是模板的样子（请注意，我现在只开发了两个内部组件中的一个，所以我使用占位符代替了第二个）：

<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>

如您所见，我的内部组件(名为< code>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还需要初始化跟踪才能完成其工作，否则我会得到一个空引用异常（这是合乎逻辑的）。

我尝试在ngOnInit（）中设置子组件数据，并仅在跟踪就绪时将其父模板的*ngIf设置为true，但似乎立即调用了ngOnIni（），即使DOM元素tig跟踪信息未与*ngIf一起显示。

我想我可以在子组件中使用事件或我自己的init方法，只在我准备好时调用，但我想知道是否有更好的方法可以使用Angular 2组件生命周期挂钩或任何其他推荐的方法来实现这一点。有人知道吗？

谢谢：-）

Answer 1

1)第一步

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

在代码中添加ChangeDetectorRef

2)第二步

constructor(private changeDetector : ChangeDetectorRef){
}

3）每当你的*ngIF="条件"发生变化时，即条件变为真，那么你可以调用

  if(true==condition){
     this.changeDetector.detectChanges();
  }

4）这将呈现您的html模板。

你可以试试这个，如果它适合你。

Answer 2

您可以使用OnChanges，每当模板绑定`[track]=“…”更改@Input（）属性值时，就会调用OnChanges

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