如何使用ng-container和ng-template

Question

如果 *ngIf 返回 true，我想提供另一个徽标。

为此，我创建了一个 ng 模板，并希望将其显示在 ng 容器中。

不幸的是，我现在无法得到它。我做错了什么？

这是我的ng模板：

<ng-template *ngIf="customLogo" #customHeader>
  <ng-container *myHeader>
      <img src="{{customSrc}}}" alt="..." class="">
  </ng-container>
</ng-template>

在这里我想使用它：

<nav *navItems>
  <ng-container *ngTemplateOutlet="customHeader"></ng-container>
  <ng-container *ngFor="let bc of bcases">
      // Some other stuff..
  </ng-container>
</nav>

Answer 1

我刚刚发现我不能在 ng 模板中嵌套 ng 容器。

我是这样解决的：

  <ng-container *ngIf="customLogo">
    <ng-container *myHeader>
      <img src="{{customLogoSrc}}" alt="" class="">
    </ng-container>
  </ng-container> 

Answer 2

ng-container 和 ng-template 的简短描述和简单示例。

如果你熟悉 React，你可能知道 Fragment React 组件。当您不想向 DOM 添加额外的 HTML 元素(如div 或 span(，但希望子组件周围有一个包装器时，将使用此组件。它就是这样工作的，它也接受Angular结构指令(ngIf，ngFor，e.t.c(。它们是可以用作包装器的元素，但不向 DOM 添加额外的元素。

ng-template 作为定义元素组合(模板内容(的模板，但 Angular 默认情况下不会渲染它。仅当您指定要渲染时，它才会起作用。

产品.组件.html

 <ng-container *ngIf="products.length > 0; else noProducts">
  <ng-container *ngFor="let product of products">
    <div *ngIf="product.id">
      <span>{{ product.name }}</span>
    </div>
  </ng-container>
</ng-container>
<ng-template #noProducts>
  <p>There are no products in this store</p>
</ng-template>

product.component.ts

import { Component, OnInit, VERSION } from '@angular/core';
interface Fruit {
  id: String;
  name: String;
}
@Component({
  selector: 'my-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css'],
})
export class ProductComponent implements OnInit {
  public products: Array<Fruit> = [
    {
      id: '1',
      name: 'apple',
    },
    {
      id: '2',
      name: 'banana',
    },
    {
      id: '3',
      name: 'pine apple',
    },
    {
      id: '4',
      name: 'jerry',
    },
  ];
  constructor() {
    // console.log('constructor');
  }
 
  ngOnInit() {
    console.log('ngOnInit');
    // this.products = [];
  }
}