原帖

Question

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

原帖

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

TL; DR：如果组件的对应HTML标记（使用selector @Component属性定义）*ngIf="true"？< / p>

但我当然遇到了困难！我在模板中有这个组件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准备就绪时将其父模板的track设置为true，但似乎ngOnInit()即使DOM元素tig-track-info未显示*ngIf，也会立即调用。

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

谢谢： - ）

Answer 1

只要@Input()属性值被模板绑定更改，就可以使用OnChanges`[track] =＆＃34; ...＆＃34;

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

Answer 2

1）第一步

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

在您的代码中添加ChangeDetectorRef

2）第二步

constructor(private changeDetector : ChangeDetectorRef){
}

3）每当* ngIf =“ condition”发生变化时，即条件变为true，则你可以打电话

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

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

如果它适合您，您可以尝试一下。

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

原帖

2 个答案: