ng-template

  测试文本

我们可以看到ng-template在页面渲染之后的样子

除了证明它的痕迹以外什么都没有

元素

什么是

  
    测试文本

页面中还是什么都不显示，但是我们在

这说明

的功能与

用处

在Angular里，通常将它当作一个嵌入式的模版
通过ViewChild获取它的一个实例，可见它是一个TemplateRef实例

ng-content

Angular2使用元素作内容映射，所谓内容映射，是指在组件内嵌入模版代码，方便定制可复用的组件。
我们定义两个组件和来说明的用处。

// 
import { Component } from '@angular/core';

@Component({  
    selector: 'app-wrapper',  
    template: `    
              
            Test ng-content      
            <!--  -->    
            
        
          
    `})
export class WrapperComponent {}

// 
import { Component, OnInit } from '@angular/core';
@Component({  
    selector: 'app-counter',  
    template: `    {{count}}  `
})
export class CounterComponent {  
    private static id = 1;  
    count: number;  
    
    constructor() {    
        this.count = CounterComponent.id++;  
    }
}

使用：

效果：

可以看见元素作为内容映射到了内部，相当于替换掉了

ng-container

是Angular2定义的一个特殊的tag。

测试文本

上面的代码渲染到页面时：

可以看到并不存在，它仅仅是作为一个容器使用。

测试文本

在它之上我们可以使用Angular的指令，而不像

之类的元素影响布局。

ITPub博客

ng-template，ng-content，ng-container

ng-template

元素

用处

ng-content

Test ng-content

ng-container

最新文章