返回顶部
首页 > 资讯 > 前端开发 > VUE >Angular中NgTemplateOutlet指令的理解和用法是什么
  • 728
分享到

Angular中NgTemplateOutlet指令的理解和用法是什么

2024-04-02 19:04:59 728人浏览 八月长安
摘要

这期内容当中小编将会给大家带来有关angular中NgTemplateOutlet指令的理解和用法是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。最近在看一个培训项目

这期内容当中小编将会给大家带来有关angular中NgTemplateOutlet指令的理解和用法是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

最近在看一个培训项目的时候有看到这个NgTemplateOutlet这个结构性指令,但是我之前没接触过,不知道这东西是怎么用的,然后,我去官网上去搜了一下这个api(官网链接点这里)。

只是说一下NgTemplateOutlet的用法和使用场景。

使用方法

这个api按照官网的说法是这样的:

根据一个提前备好的 TemplateRef 插入一个内嵌视图。

我给它翻译一下:使NgTemplateOutlet的宿主元素变成一个内嵌视图——这个内嵌视图是根据一个提前定义好的templateRef模板引用生成的。而宿主元素无论是什么元素,都不会被渲染出来。

我们将官网的示例改一下(因为官网的人命我看不懂):

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <ng-container *ngTemplateOutlet="one"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="two; context: myContext"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="three; context: myContext"></ng-container>
    <hr>

    <ng-template #one><span>Hello</span></ng-template>
    <ng-template #two let-name><span>Hello {{name}}!</span></ng-template>
    <ng-template #three let-person="lastName">My name is <span>LeBron {{person}}!</span></ng-template>
`
})
export class NgTemplateOutletExample {
  myContext = {$implicit: 'World', lastName: 'James'};
}

一个宿主元素可以使用ngTemplateOutlet这个结构性指令,使自己变成任意的一个<ng-template>模板生成的内嵌视图。并且可以给其设置上下文对象。然后我们在这个模板中可以使用let-变量这个模板输入变量来获取上下文对象中的值,这个模板更具灵活性。

应用场景

类似于ng-zorro这个框架的分页组件Pagination(官网链接)。如果我们对默认上一页和下一页的样式或者结构不满意,想要自己调整的话,我们可以提供一个输入属性(@Input定义的属性),来接收一个模板,并且为其提供所必须的属性或者方法。这样的话,我们就可以在不修改组件源码的情况下实现组件的复用。

Demo

我们先定义一个子组件HeroDisplayCard,角色的展示界面

@Component({
  selector:'app-hero-display-card',
  template:`
    <h3 [style]="{textAlign:'center'}">角色列表</h3>
    <ul class="hero-card-box">
      <li class="hero-card-item" *ngFor="let h of heroesList">
        <p [style]="{textAlign:'center'}">
          角色id:{{h.id}}--
          角色名字:{{h.name}}--
          角色属性:{{h.features}}
        </p>
      </li>
    </ul>
  `,
  styles:[
    `.hero-card-box{
      width: 600px;
      margin: 10px auto;
    }
    .hero-card-item{
      list-style: none;
    }
    `
  ]
})
export class HeroDisplayCard {
  public heroesList = [
    {id:'013',name:'钟离',features:'rock'},
    {id:'061',name:'烟绯',features:'fire'},
    {id:'022',name:'迪奥娜',features:'ice'},
    {id:'004',name:'诺艾尔',features:'rock'},
  ]
}

然后将这个组件引入一个父组件当中:

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    <app-hero-display-card></app-hero-display-card>
  `
})
export class TemplateOutletAppDemoComponent {}

代码运行一下,效果如图:

Angular中NgTemplateOutlet指令的理解和用法是什么

我觉得这个li的样式实在是太丑了,而且顺序也不太对。我希望把角色属性调到角色名字之前。这样的话,如果只是单纯的通过输入属性来更改样式的话就会变得很麻烦,我们可能需要定义非常多的变量来供使用者选择,这样的话有点得不偿失。那么我们何不直接提供一个模板给使用者,我们只需要提供必要的数据就可以了。样式,排版这些自由交给使用者。

那么对于子组件HeroDisplayCard我们可以这么改:

@Component({
  selector:'app-hero-display-card',
  template:`
    <h3 [style]="{textAlign:'center'}">角色列表</h3>
    <ul class="hero-card-box">
      <ng-container *ngFor="let h of heroesList">
        <!-- 如果没有传入cardItemTemplate则显示默认 -->
        <li class="hero-card-item" *ngIf="!cardItemTemplate">
          <p [style]="{textAlign:'center'}">
            角色id:{{h.id}}--
            角色名字:{{h.name}}--
            角色属性:{{h.features}}
          </p>
        </li>
        <!-- 如果传入了自定义模板,则显示出来,鉴于angular的结构型指令不能在同一个宿主元素上的规定,于是这样写 -->
        <ng-container *ngIf="cardItemTemplate">
		  <!-- 将自定义模板的上下文对象设置为h -->
          <ng-container *ngTemplateOutlet="cardItemTemplate;context:h"></ng-container>
        </ng-container>
      </ng-container>
    </ul>
  `,
  styles:[ //省略 ]
})
export class HeroDisplayCard {
  @Input() cardItemTemplate:TemplateRef<any>;
  public heroesList = [ // 省略]
}

然后我们在父组件中将自定义的模板传入进去:

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    <app-hero-display-card [cardItemTemplate]="myCardTemplate"></app-hero-display-card>
	<!-- 将模板引用变量myCardTemplate传入子组件 -->
    <ng-template #myCardTemplate let-id="id" let-name="name" let-features="features">
      <li class="hero-card-custom-item">
        <p>角色id:<span>{{id}}</span></p>
        <p>角色属性:<span>{{features}}</span></p>
        <p>角色名字:<span>{{name}}</span></p>
      </li>
    </ng-template>
  `,
  styles:[
    //在这里写自定义模板的样式  
    `.hero-card-custom-item{
      width: 100%;
      height: 35px;
      border: 1px solid #999999;
      border-radius: 5px;
      display: flex;
      justify-content:space-around;
      align-items: center;
      margin: 10px 0;
    }
    .hero-card-custom-item p {
      width: 30%;
      margin: 0;
      font-size: 20px;
      color: #666666;
    }
    .hero-card-custom-item p span {
      color: red;
    }`
  ]
})
export class TemplateOutletAppDemoComponent {}

然后运行一下,效果如图(其实还是很丑):

Angular中NgTemplateOutlet指令的理解和用法是什么

总结

使用NgTemplateOutlet这个结构性指令可以增强我们子组件的封装程度,避免需要定义大量的输入属性,导致父组件的模板看起来臃肿不堪。

上述就是小编为大家分享的Angular中NgTemplateOutlet指令的理解和用法是什么了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网VUE频道。

--结束END--

本文标题: Angular中NgTemplateOutlet指令的理解和用法是什么

本文链接: https://www.lsjlt.com/news/83708.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Angular中NgTemplateOutlet指令的理解和用法是什么
    这期内容当中小编将会给大家带来有关Angular中NgTemplateOutlet指令的理解和用法是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。最近在看一个培训项目...
    99+
    2024-04-02
  • angular中控制器、服务和指令的关系是什么
    今天就跟大家聊聊有关angular中控制器、服务和指令的关系是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。从总体来看,这三个组件的关系如下所示:服务负责从远端服务器抓取和存储数...
    99+
    2023-06-15
  • Angular模板中ng-template和ng-container指令的用法
    这篇文章主要讲解了“Angular模板中ng-template和ng-container指令的用法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Angula...
    99+
    2024-04-02
  • angular指令中4种设计模式是什么
    这篇文章给大家分享的是有关angular指令中4种设计模式是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。指令的功能集非常丰富,不过我们已经发现了指令的帕累托分布:使用angular编写的大量指令只会用到可用...
    99+
    2023-06-15
  • 如何理解Angular中的指令和管道以及服务
    这篇文章将为大家详细讲解有关如何理解Angular中的指令和管道以及服务,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1. 指令 Directive指令是 ...
    99+
    2024-04-02
  • Angular中的ActivatedRoute和Router原理是什么
    这篇“Angular中的ActivatedRoute和Router原理是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“A...
    99+
    2023-07-06
  • Angular中navigate()和navigateByUrl()使用方法的区别是什么
    这篇文章主要介绍“Angular中navigate()和navigateByUrl()使用方法的区别是什么”,在日常操作中,相信很多人在Angular中navigate()和navigateByUrl()使...
    99+
    2024-04-02
  • Angular中的结构指令模式及使用详解
    目录你将学到什么Angular 结构指令是什么?Angular 结构指令是怎么工作的?结构指令的例子怎么使用 *ngIf 指令怎么使用 *ngFor 指令怎么使用 *ngSwitch...
    99+
    2024-04-02
  • linux命令和dos命令指的是什么
    这篇“linux命令和dos命令指的是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“l...
    99+
    2023-02-15
    linux dos
  • angular中的作用域是什么
    今天就跟大家聊聊有关angular中的作用域是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1、$rootscope $rootScope顶级作...
    99+
    2024-04-02
  • Angular中 Component的作用是什么
    Angular中 Component的作用是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。定义W3C为统一组件化标准方式,提出Web ...
    99+
    2024-04-02
  • CentOS中badblocks指令的作用是什么
    本篇文章给大家分享的是有关CentOS中badblocks指令的作用是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。一、命令参数badblocks使用格式为:引用badbl...
    99+
    2023-06-10
  • jsp中include指令的作用是什么
    在JSP中,include指令用于在当前JSP页面中包含其他JSP页面或静态文件的内容。它的作用是将被包含的内容直接嵌入到当前页面中...
    99+
    2023-08-12
    jsp include
  • Angular中zone.js的工作原理是什么
    这篇文章主要介绍“Angular中zone.js的工作原理是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular中zone.js的工作原理是什么”文章能...
    99+
    2024-04-02
  • 怎么理解Vue中的模板语法插值和指令
    本篇内容主要讲解“怎么理解Vue中的模板语法插值和指令”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么理解Vue中的模板语法插值和指令”吧!Vue有很多模板语法特别好用,就是在HTML中写一些...
    99+
    2023-06-25
  • MySQL中kill 指令的执行原理是什么
    这篇文章将为大家详细讲解有关MySQL中kill 指令的执行原理是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Kill 指令执行原理指令执行特点 一个语句执行过程中...
    99+
    2023-06-08
  • Vue.js中v-model指令的作用是什么
    Vue.js中v-model指令的作用是什么,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。v-model 指令在表单 &l...
    99+
    2024-04-02
  • Vue中常用的内置指令是什么
    这篇文章将为大家详细讲解有关Vue中常用的内置指令是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。<body>    <div id...
    99+
    2023-06-25
  • Angular路由的基本用法是什么
    这篇文章主要讲解了“Angular路由的基本用法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Angular路由的基本用法是什么”吧!环境:Angul...
    99+
    2024-04-02
  • AngularJS的指令和表达式是什么
    AngularJS的指令和表达式是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 指令属性目前为止,我们已提到过几次“指令属...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作