AngularJS中ng-container和ng-template的区别

ng-container和ng-template都可以用来创建响应式的动态组件。Angular提供了一套结构指令，可以与ng-template和ng-container一起使用，例如。

ng-if
ng-for
ng-switch。

这些结构指令被用来通过有条件地渲染HTML元素来改变DOM的结构。

ng-container和ng-template都是在隐藏自己的同时渲染被包裹的元素，但它们都遵循不同的机制，这些区别将在下面的文章中展示。

ng-template:让我们试试一个例子。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
  <div style="text-align: center;">
    
  <!--no directive is used with ng-template-->
    
  <ng-template>
    <h1>
      {{title}}
    </h1>
  </ng-template>
  </div> 
  `,
  styleUrls: []
})
export class AppComponent {
  title = 'geeksforgeeks'; 
}

是的，没有任何东西会被呈现出来。当我们检查HTML代码时，我们会看到。

AngularJS中ng-container和ng-template的区别

这是因为ng-template自己不做任何事情。它需要一些渲染逻辑来渲染一些东西。

让我们尝试另一个例子。

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  template: `
  <div style="text-align: center;">
    
  <!--this time we will add an
 ng-if directive to ng-template.-->
    
  <ng-template [ngIf]="datahide">
  
    {{ title }}
  
  </ng-template>
  </div> 
  `,
  styleUrls: []
})
export class AppComponent {
  title = 'geeksforgeeks'; 
  datahide = true;
}

这一次的输出将是这样的。

AngularJS中ng-container和ng-template的区别

在这两个例子中，我们可以看到模板自己评论出来，有条件地渲染包装的内容。

ng-container: ‘ng-container’确实与’ng-template’有一些相似之处，比如它们都是在省略自己的同时渲染被包装的内容。但另一方面，ng-container是在我们使用多个结构指令而没有合适的父级包装器时使用的。它不需要结构指令来渲染子元素，不像ng-template那样需要使用结构指令。

让我们看一个例子。

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  template: `
  <div style="text-align: center;">
    
  <!--ng-container without any structural directive-->
    
  <ng-container>
  
    {{ title }}
  
  </ng-container>
  </div> 
  `,
  styleUrls: []
})
export class AppComponent {
  title = 'geeksforgeeks'; 
  datahide = true;
}

在这种情况下，即使没有任何结构指令，HTML也被渲染了。

AngularJS中ng-container和ng-template的区别

让我们看看如果我们把一个ng-template包在一个ng-container里面会发生什么。

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  template: `
  <div style="text-align: center;">
    
  <!--ng-container used as wrapper for ng-template-->
    
  <ng-container>
  <ng-template [ngIf]="datahide">
  
    {{ title }}
  
  </ng-template>
  </ng-container>
  </div> 
  `,
  styleUrls: []
})
export class AppComponent {
  title = 'geeksforgeeks'; 
  datahide = true;
}

ng-container成功包装了一个ng-template。

AngularJS中ng-container和ng-template的区别