本篇文章带大家了解一下angular中ngtemplateoutlet指令，介绍一下ngtemplateoutlet这个结构性指令的理解与应用，希望对大家有所帮助！
最近在看一个培训项目的时候有看到这个NgTemplateOutlet这个结构性指令，但是我之前没接触过，不知道这东西是怎么用的，然后，我去官网上去搜了一下这个api（官网链接点这里）。
但是它的这个api说明我看不懂，不知道这个什么所谓的上下文对象是啥，也不知道这个let变量又是啥。然后经过我一整天的翻文档，记笔记，终于搞明白了这是什么东西了，没有搞明白的小伙伴可以参考一下我的上一篇文章：【Angular学习】关于模板输入变量（let-变量）的理解
这篇文章就只是说一下NgTemplateOutlet的用法和使用场景。【相关教程推荐：《angular教程》】
使用方法
这个api按照官网的说法是这样的：
根据一个提前备好的 TemplateRef 插入一个内嵌视图。
我给它翻译一下：使NgTemplateOutlet的宿主元素变成一个内嵌视图——这个内嵌视图是根据一个提前定义好的templateRef模板引用生成的。而宿主元素无论是什么元素，都不会被渲染出来。
我们将官网的示例改一下（因为官网的人命我看不懂）：
@Component({ selector: 'ng-template-outlet-example', template: `
Hello Hello {{name}}! My name is LeBron {{person}}!`})export class NgTemplateOutletExample { myContext = {$implicit: 'World', lastName: 'James'};}
一个宿主元素可以使用ngTemplateOutlet这个结构性指令，使自己变成任意的一个模板生成的内嵌视图。并且可以给其设置上下文对象。然后我们在这个模板中可以使用let-变量这个模板输入变量来获取上下文对象中的值，这个模板更具灵活性。
应用场景
类似于ng-zorro这个框架的分页组件Pagination（官网链接）。如果我们对默认上一页和下一页的样式或者结构不满意，想要自己调整的话，我们可以提供一个输入属性（@Input定义的属性）,来接收一个模板，并且为其提供所必须的属性或者方法。这样的话，我们就可以在不修改组件源码的情况下实现组件的复用。
Demo
我们先定义一个子组件HeroDisplayCard，角色的展示界面
@Component({ selector:'app-hero-display-card', template:` 角色列表
-
角色id：{{h.id}}-- 角色名字：{{h.name}}-- 角色属性：{{h.features}}
然后将这个组件引入一个父组件当中：
法语写作助手
法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。
31 查看详情
@Component({ selector:'app-templateoutlet-app-demo', template:` `})export class TemplateOutletAppDemoComponent {}
代码运行一下，效果如图：
我觉得这个li的样式实在是太丑了，而且顺序也不太对。我希望把角色属性调到角色名字之前。这样的话，如果只是单纯的通过输入属性来更改样式的话就会变得很麻烦，我们可能需要定义非常多的变量来供使用者选择，这样的话有点得不偿失。那么我们何不直接提供一个模板给使用者，我们只需要提供必要的数据就可以了。样式，排版这些自由交给使用者。
那么对于子组件HeroDisplayCard我们可以这么改：
@Component({ selector:'app-hero-display-card', template:` 角色列表
-
角色id：{{h.id}}-- 角色名字：{{h.name}}-- 角色属性：{{h.features}}
然后我们在父组件中将自定义的模板传入进去：
@Component({ selector:'app-templateoutlet-app-demo', template:` 角色id：{{id}}
角色属性：{{features}}
角色名字：{{name}}
然后运行一下，效果如图（其实还是很丑）：
总结
使用NgTemplateOutlet这个结构性指令可以增强我们子组件的封装程度，避免需要定义大量的输入属性，导致父组件的模板看起来臃肿不堪。
更多编程相关知识，请访问：编程入门！！
以上就是聊聊Angular中NgTemplateOutlet指令的理解和用法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/559224.html
微信扫一扫 
支付宝扫一扫 
