Angular模板中ng-template和ng-container指令的用法

合同介绍......

ngTemplateOutlet是定义模板引用和模板的上下文(即ng-template)对象的字符串，这样如果有多个模板引用可以用这种方式 ngTemplateOutletContext是附加到的上下文(即ng-template)对象EmbeddedViewRef。这应该是一个对象，该对象的键可用于本地模板let 声明的绑定。$implicit在上下文(即ng-template)对象中使用键会将其值设置为默认值。 ngTemplateOutlet也可用于外部传进来的模板

child.component.html

child.component.ts

@Input() tplRef: TemplateRef

ng-template用法

用法一

结合*ngIf使用，这样可以不用加两次不同判断条件，可以在html里直接使用if else语句

{{text}}

    暂无数据

用法二

页面里使用antd的modalService创建对话框时，可以模板写在html里面，通过引用加载过来放到modal的nzContent里（说的有点乱了，看代码吧）

xxxxxxx

export class AppComponent implements OnInit {
    // 引入模板
     @ViewChild('content') contentTpl: TemplateRef;
    ngOnInit() {
        this.modalService.create({
            nzTitle: '标题',
            nzContent: this.contentTpl
        })
    }
}

用法三

以模板的形式，作为一个输入变量传给组件，这样我们就可以在用这个组件时写成自己想要的内容 比如我们写个共用的暂无数据的组件，一般只用传text文字就可以有些特殊的时候我们可能需要一些新增按钮。

empty.component.html

    
    

        
            
        
        {{text || ''}}
    

empty.component.ts

export class EmptyComponent {
    @Input() text: TemplateRef
  isTemplate(text: any) {
      return text instanceof TemplateRef;
  }
}

总结，都是一些最基础的用法，现在所了解的就这些用法，如果有知道更多的欢迎大家补充。

感谢各位的阅读，以上就是“Angular模板中ng-template和ng-container指令的用法”的内容了，经过本文的学习后，相信大家对Angular模板中ng-template和ng-container指令的用法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！