java中的接口是类吗
610
2023-02-16
Angular 向组件传递模板的两种方法
最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式。为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的。这时候,组件的一部分模板就需要由调用方提供。
在 React 里面,这种需求挺简单的,只要实现一个 date => Element 这样的函数就好了,但是 Angular 模板是纯粹的模板,需要使用一些专门的概念才能实现这个功能。
第一种方式
基本用法
hello
假设我们有一个上述的组件,然后向下面这样调用:
World
那么最终的渲染结果将会是这样的:
hello
World
看起来就是发生了很简单的替换,但是如果在 Wrapper 中出现了多个
进阶用法
当然,如果
hello
然后像下面这样使用:
&GHLRbOFNlt;span> World
2333
最终的渲染结果将会是这样:
hello
2333
World
除了设置 ng-content 标签的 select 属性之外,还可以在子元素上使用 ngProjectAs 属性,这个属性可以让这个元素被父元素中指定的 ng-content 所捕获。举个例子:
http://
2333
这次被传入的模板变成了一个 div,但是因为设置了 ngProjectAs,所以“World”会出现在分割线下方。
第二种方式 NgTemplateOutlet 指令
使用 ng-content 确实可以起到传入模板的效果,但是却有个很致命的问题,就是无法传递数据到传入的模板中。为了将数据传递到传入的模板中,就需要使用到 NgTemplateOutlet 指令。
基本使用
这个指令可以用来在模板的指定位置实例化一个 TemplateRef 对象,同时,在实例化的过程中还可以传入一个数据对象。而 TemplateRef 可以通过 ng-template 标签来创建,举个例子:
@Component({
selector: 'ng-template-outlet-example',
template: `
`
})
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}}!
</ng-template>
总结
以上就是 Angular 中向组件传递模板的两种方法,其中,使用
以上所述是给大家介绍的Angular 向组件传递模板的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~