在Angular中向组件传递模板

这篇文章主要介绍了angular 向组件传递模板的两种方法,第一种方式第二种方式是ngtemplateoutlet 指令及各种使用方式介绍,需要的朋友可以参考下

最近在写一个日期选择器组件，为了满足将来可能出现的各种需求，所以需要能够高度的自定义组件的样式。为了达到这个目的，需要能够在日期选择器组件外控制每个日期格子内要显示的内容，比如，标上节假日之类的。这时候，组件的一部分模板就需要由调用方提供。

在 React 里面，这种需求挺简单的，只要实现一个 date => Element 这样的函数就好了，但是 Angular 模板是纯粹的模板，需要使用一些专门的概念才能实现这个功能。

第一种方式

这个标签到本文撰写时为止，还没有官方的文档，甚至连占位符都没有。但是这并不妨碍我们的使用，外国热心网友已经总结出了 在现阶段的特点与作用。

基本用法

  hello
  

假设我们有一个上述的组件，然后向下面这样调用：

   World 

那么最终的渲染结果将会是这样的：

  hello
   World 

看起来就是发生了很简单的替换，但是如果在 Wrapper 中出现了多个 会出现多个 World 吗？答案是不会的。 的本质只是移动元素，并不会去自动的创建传入的模板，所以就算用 ngFor 套住 也不会出现很多个 World 。如果传入的是自定义的组件，这些组件也只会被实例化一次。

进阶用法

当然，如果 的功能仅仅只是这样就显得太鸡肋了，在使用 的时候可以指定一个选择器，这个选择器可以捕获相符的直接子元素。例如：

  hello
  
  

  

然后像下面这样使用：

   World 
  2333

最终的渲染结果将会是这样：

  hello
  2333
  

   World 

除了设置 ng-content 标签的 select 属性之外，还可以在子元素上使用 ngProjectAs 属性，这个属性可以让这个元素被父元素中指定的 ng-content 所捕获。举个例子：

  
 World 
  2333

这次被传入的模板变成了一个 p，但是因为设置了 ngProjectAs，所以“World”会出现在分割线下方。

ReportPlus数据报表中心小程序

ReportPlust意在打造一套精美的数据报表模板，里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件，用户只需要按照虚拟数据的格式，传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件

下载

第二种方式 NgTemplateOutlet 指令

使用 ng-content 确实可以起到传入模板的效果，但是却有个很致命的问题，就是无法传递数据到传入的模板中。为了将数据传递到传入的模板中，就需要使用到 NgTemplateOutlet 指令。

基本使用

这个指令可以用来在模板的指定位置实例化一个 TemplateRef 对象，同时，在实例化的过程中还可以传入一个数据对象。而 TemplateRef 可以通过 ng-template 标签来创建，举个例子：

@Component({
 selector: 'ng-template-outlet-example',
 template: `
  

  Hello {{name}}!
`
})
class NgTemplateOutletExample {
 myContext = {data: 'World'};
}

ng-container 是一个虚拟的元素，在这个元素上我们使用了一个 NgTemplateOutlet 指令，指定了要实例化下面的名为 name 的 ng-template。同时把 myContext 这个对象作为实例化的数据上下文传入，所以最终就会显示 “Hello World!”。值得注意的是在 ng-template 里面获取传输的数据上下文的方式：let-variableName='key'。

进阶使用

接下来就要实现本文开头提到的需求了，在组件外部传入模板。还是以上面的例子为例，因为模板需要由外界作为子内容传入，所以需要我们手动来捕获模板，这里需要就需要使用 ContentChild：

@Component({
 selector: 'wrapper',
 template: `
  
`
})
class NgTemplateOutletExample {
 @ContentChild(TemplateRef) name: TemplateRef;
 myContext = {data: 'World'};
}

就是这么简单的改动就可以让我们的组件从外界接受模板了，来试一试：

  
    Hello {{value}}!
  

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue.js中如何给动态绑定的radio列表做批量编辑

在使用React组件中转 Vue 组件的命令写法有哪些？

在JavaScript中如何复制内容到剪贴板