Update:
GünterZöchbauer提供了一个非常可接受的答案，完美无缺（谢谢！） . 但是我仍然有一个问题要检查我所做的是否是获得我所寻求的结果的正确方法 . 上下文给出了上下文 .
我对父视图上的自定义标记的期望是，当 *ngIf 条件为假时，组件根本不加载（或者可能大部分加载） . 是否正常，即使它不在DOM中（因为条件为假），它仍然被加载？有没有更好的方法来嵌入组件' templates (and the logic of their class) into a parent component'的模板？

原帖

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

TL;DR: 如果只有在相应的HTML标签（用 @Component 的 selector 属性定义）_1141181_时才启动组件？

但我当然面临困难！我有这个组件， 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() 中设置子组件数据，并仅在 track 准备好时将其父模板的 *ngIf 设置为true，但似乎立即调用 ngOnInit() ，即使DOM元素 tig-track-info 未显示 *ngIf .

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

谢谢：-）

1 回答

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

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

回复于 2024-04-25T23:43:35+08:00

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

原帖

1 回答

相关问题