Question

我试图制作一个使用ngTemplateOutlet来选择ng-template的组件，但是我只是想不通为什么* ngTemplateOutlet在这里不起作用（但是[ngTemplateOutlet]在起作用）。

这是我的代码

demo-frame.component.html：

<div class="frame-wrapper">
  <ng-container [ngTemplateOutlet]="(windowWidth < 480)? this.realView : this.shelledView">
    <ng-template #realView>
      realView work!!
    </ng-template>
    <ng-template #shelledView>
      shelledView work!!
    </ng-template>
  </ng-container>
</div>

demo-frame.component.ts：

import { Component, OnInit, ViewChild, TemplateRef, HostListener} from '@angular/core';

@Component({
  selector: 'app-demo-frame',
  templateUrl: './demo-frame.component.html',
  styleUrls: ['./demo-frame.component.scss']
})
export class DemoFrameComponent implements OnInit {

  public windowWidth : number;
  @ViewChild('realView') realView : TemplateRef<any>;
  @ViewChild('shelledView') shelledView : TemplateRef<any>;

  constructor() { }

  getWindowWidth(){
    this.windowWidth = window.innerWidth;
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.getWindowWidth();
  }

  ngOnInit() {
    this.getWindowWidth();
  }

}

实际上，我是Angular的新手：（只需要有人指出我的错误

Answer 1

如果指令以星号（*）开头，则表示它是结构指令（以角度表示）。在幕后，角度操作将把您的宿主元素包装在ng-template中。因此，在您的情况下，整个ng-container将像下面的代码一样包装在ng-template内，因此在您的代码中viewChild没有初始化，这就是为什么它不起作用的原因。

<div class="frame-wrapper">
  <ng-template [ngTemplateOutlet]="(windowWidth < 480)? this.realView : this.shelledView">
    <ng-container>
    <ng-template #realView>
      realView work!!
    </ng-template>
    <ng-template #shelledView>
      shelledView work!!
    </ng-template>
  </ng-container>
  </ng-template>
</div>

For more info check this

“ [ngTemplateOutet]”正在工作，但“ * ngTemplateOutlet”却没有

1 个答案: