Angular-03:组件模板

这篇具有很好参考价值的文章主要介绍了Angular-03:组件模板。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

各种学习后的知识点整理归纳,非原创!

① 数据绑定

  1. 将组件类中的数据显示在组件模板中,组件类数据发生变化时会自动同步到组件模板中。(数据驱动DOM)
  2. 语法:{{}},插值表达式。

② 属性绑定

  • DOM对象属性
  1. 语法:[属性名] // 属性名加中括号[]
<img [src]="imgUrl" />
  • HTML标签属性
  1. [attr.属性名] // attr.属性名加中括号[]
  2. 自定义属性适用于该情况
<td [attr.colspan]="colspan"></td>

③ 类名绑定

  1. 语法1:[class.类名]=布尔值
  2. 语法2:[ngClass]={ 类名:条件 }
<p [class.active]="true"></p>

<p [ngClass]="{'a-name':true,'b-name':false}"></p>

④ 样式绑定

  1. 语法1:[style.css属性名]=条件;
  2. 语法2:[ngStyle]={css属性名:css属性值}
<p [style.width]="isDefault ? '100px' : '200px'"></p>

<p [ngStyle]="{'width':100px,'height':'200px'}"></p>

⑤ 事件绑定

<!-- 鼠标单击 -->
<p (click)="show($event)"></p>  
<p (click)="show()"></p>

<!-- 按下enter键触发 -->
<input type="text" (keyup.enter)="show($event)" /> 

// ts中定义函数show
show(event:Event){
  //...
}

⑥ 获取原生DOM对象

6.1 在组件模板中获取

举例:获取文本框中输入的值。

  1. #userName : 模板变量,变量中存储的就是原生Dom对象本身;
  2. 通过事件处理的方式传递到组件类中;
<!-- 输入完回车之后,可以通过定义的 `#username` 获取输入的值 -->

<input type="text" (keyup.enter)="getValue(username.value)" #username />
  // 在ts中定义模板变量和接收方法
  // 该变量此处不定义也可以获取到,能正常运行。但是在ng build时可能会编译失败,有严格模式。
  @ViewChild('username') username: ElementRef<HTMLParagraphElement | undefined>;

  getValue(value: Event) {
    console.log("value", value)
  }

6.2 在组件类中获取

  1. @ViewChild属性装饰器,用来从模板视图中获取匹配的元素。
  2. 视图查询在ngAfterViewInit钩子函数调用前完成,所以在该函数中才能获取到查询元素。

稍微有点详细的用法:angular知识点–@ViewChild详解

举例1: 使用ViewChild装饰器获取一个元素

  1. 在组件模板上添加模板变量。
  2. 在组件类中使用@viewChild装饰器获取模板变量。
  3. @ViewChild是装饰器函数,参数是定义的模板变量名(pName),然后赋值给新的变量pElement(也可以理解为取了个别名)。 声明该变量的类型,undefined可以理解为类型保护,不会因为未获取到该元素而报错。
<p #pName> hello! </p>
// 在ts中定义该模板变量

 @ViewChild("pName") pElement:ElementRef<HTMLParagraphElement> | undefined;

 ngAfterViewInit(){
      console.log("pName", this.pName && this.pName.nativeElement);
   }

输出截图:(截图放错了,应该输出的时hello!)
Angular-03:组件模板,angular,angular
举例2: 使用ViewChildren装饰器获取一组元素

  1. 使用@ViewChildren() 装饰器从组件模板中获取匹配多个元素,返回的结果是一个QueryList集合。
 <ul>
	<li #items>a</li>
     <li #items>b</li>
     <li #items>c</li>
     <li #items>d</li>
</ul>
  @ViewChildren("items") liElements:QueryList<HTMLElement> | undefined;
     ngAfterViewInit(){
         console.log("items",this.liElements)
         console.log("items",this.liElements.toArray())
     }

打印1:
Angular-03:组件模板,angular,angular
打印2:
Angular-03:组件模板,angular,angular


⑦ 双向数据绑定

  1. 数据在组件模板和组件类中双向同步。(在组件模板中数据做了更改会在组件类中同步跟随变化,反之一样)
  2. 常用于表单中,所以该模块依赖于angular表单模块,需要导入FormsModule。
  3. 语法:[(ngModule)]=“变量名”

举例:在input文本框内输入值的时候,userName值一直在改变。在组件类的方法中也在影响着组件模板中的值。

  <input type="text" [(ngModule)]="userName" />
  <button (click)="changeValue()">在组件类中更改</button> 
 // ts
  userName:string="";
  changeValue(){
  this.userName="hello angular";
 }

⑧ 内容投影

  1. ng-content,也叫内容嵌入,是组件的一个高级功能特性。
  2. 能够很好的扩充组件功能,方便代码的复用。常用于用来创建可复用的组件。
  3. 可以理解为:在编写模板组件时,使用ng-content做一个占位符,引用组件时,往此处填充。
  4. 在定义多个插槽时,插槽的顺序就是内容最终的显示顺序。(在使用插槽时的内容顺序不会生效)
  5. 另外一篇指路:angular知识点–组件内容嵌入

8.1 select选择器

可理解为css选择器,作用是类似的。

类型 用法
html标签 select=“标签”
css类名 select=“.类名”
自定义组件名称 select=“组件名”
自定义属性名称 select=“[属性名]”

举例:场景:制作一个可复用的导航栏(NavComponent),导航栏的内容可动态变化

8.2 单槽投影

一个ng-content,不使用select选择器

<!-- NavComponent -->

<!-- 一个导航栏,左边是返回按钮,中间ng-content是可动态替换的内容。 -->
<div class="nav-wrapper">
  <span>返回</span>
  <div class="content">
    <ng-content></ng-content>
  </div>
</div>
<!-- 在其他组件使用NavComponent 组件-->

<!-- app-nav 中的 p标签的内容会被填充显示到ng-content区域-->
<app-nav>
  <p>测试文字</p>     
</app-nav>

结果:
Angular-03:组件模板,angular,angular

8.3 多槽投影

  1. 多个ng-content,使用select选择器
  2. 一个组件多个插槽,需要使用select与让插槽与元素有一一对应关系。
  • 在引入的app-nav中添加多个条件的内容,让app-nav组件的的select选择器去匹配
    1. 在使用插槽的时候,不根据在引用组件中定义的内容顺序显示,而是根据在定义插槽时排列的顺序。
    2. 这里使用插槽时,顺序与app-nav组件模板中定义的插槽不一致,生效的时插槽内的顺序。
<app-nav>

  <p>测试文字(默认)</p> <!-- 无法匹配到,因为没有符合条件的选择器,页面上也不会渲染该节点 -->
  
  <span>匹配标签选择器</span>
  
  <P class="head">匹配类选择器</P>
  
  <p userName="'nothing'">匹配属性选择器</p>

  <app-test></app-test> <!-- 匹配app-test选择器。显示组件内的默认内容:app-test works! -->
  
</app-nav>

在app-nav组件内添加多个ng-content与之匹配的选择器。

<!-- app-nav组件 -->
<div class="nav-wrapper">
  <span>返回</span>
  <div class="content">

    <!-- 标签 -->
    <ng-content select="span"></ng-content><!-- css类名 -->
    <ng-content select=".head"></ng-content><!-- 组件名 -->
    <ng-content select="app-test"></ng-content><!-- 自定义属性 -->
    <ng-content select="[userName]"></ng-content>

  </div>
</div>

结果:

  1. 除了第一条不符合选择器匹配规则,其他的分别都匹配上了
    Angular-03:组件模板,angular,angular

⑨ 安全操作符(数据绑定的容错处理)

  1. 当属性不存在或者属性为可选的或者对象层级较深,angular会有报错

几种处理手段:文章来源地址https://www.toymoban.com/news/detail-733803.html

   <p>{{user?.name}}</p>    //user存在才会取name值
   
   <p *ngIf="user">{{user.name}}</p>
   
   <p> {{user && user.name}}</p>

到了这里,关于Angular-03:组件模板的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Angular中的组件

    组件简介 Angular中的组件,是一个使用 @component()装饰器 装饰的特殊类,同时在这个装饰器中指定 元数据 ,元数据包括 组件选择器 、 组件模板 、 组件样式 等。 组件是angular模块化的一个基本的组成元素。日常开发中,页面通常就是由一个或者多个组件堆叠而成。 组件的元

    2023年04月08日
    浏览(31)
  • Angular 独立组件入门

    如果你正在学习 Angular,那么你可能已经听说过独立组件(Component)。顾名思义,独立组件就是可以独立使用和管理的组件,它们能够被包含在其他组件中或被其他组件引用。 在本文中,我们将学习如何创建简单的独立组件以及如何在 Angular 应用程序中使用它们。 创建组件

    2024年02月13日
    浏览(31)
  • Angular独立组件简单体验

    Angular 14一项令人兴奋的特性就是Angular的独立组件终于来了。 在Angular 14中, 开发者可以尝试使用独立组件开发各种组件,但是值得注意的是Angular独立组件的API仍然没有稳定下,将来可能存在一些破坏性更新,所以不推荐在生产环境中使用。 对于已有的组件,我们可以在 @

    2024年01月20日
    浏览(36)
  • angular实现全局组件

    之前我们实现全局组件的第一种方式。我们是在定义了组件的时候通过在declares:[component],然后exports出该组件。最后在页面中每次导入该组件,而这次我们将采用另一种方式来实现 1 新建公用组件: 2 新建一个share.module.ts,在该module中引入我们所有的公共组件,本例中只有一个

    2024年02月12日
    浏览(42)
  • Angular系列教程之组件

    在Angular中,组件是构建Web应用程序的核心单元。它们允许我们将UI划分为独立且可重用的部分,并通过数据绑定和事件处理等机制来实现交互性。本文将介绍Angular组件的基本概念,并说明组件和指令的关系。 组件是一个由HTML模板、样式和逻辑代码组成的独立单元。它可以看

    2024年01月17日
    浏览(36)
  • Angular组件生命周期详解

    当 Angular 实例化组件类 并渲染组件视图及其子视图时,组件实例的生命周期就开始了。生命周期一直伴随着变更检测,Angular 会检查数据绑定属性何时发生变化,并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时,生命周期就结束了。当 Ang

    2024年02月05日
    浏览(43)
  • Angular 怎么封装基础组件?

    在Angular中,封装基础组件通常是通过创建自定义Angular组件来实现的。这些自定义组件可以包含通用的功能和样式,然后可以在应用中多次重复使用。以下是一个简单的示例,说明如何封装一个基础组件。 假设我们要创建一个通用的警告框组件,它可以在应用中的不同部分显

    2024年02月09日
    浏览(37)
  • Angular组件通信

    给子组件标签自定义一个属性 子组件引入 Input 模块 父组件: 子组件: Angular的Output属性是用于子组件向父组件传递信息的一种方式。通过在子组件中定义一个Output属性,子组件可以通过EventEmitter触发这个属性,父组件可以通过@Output的形式监听子组件的属性,并在属性被触发

    2024年02月05日
    浏览(39)
  • Angular组件(一) 分割面板ShrinkSplitter

    Angular组件(一) 分割面板ShrinkSplitter 分割面板在日常开发中经常使用,可将一片区域,分割为可以拖拽整宽度或高度的两部分区域。模仿iview的分割面板组件,用angular实现该功能,支持拖拽和 [(ngModel)] 双向绑定的方式控制区域的展示收起和拖拽功能。 左右容器和上下容器

    2024年01月24日
    浏览(15)
  • Angular中组件设计需要注意什么?

    在 Angular 中设计组件时,有几个重要的方面需要注意。以下是一些建议: 1、单一职责原则:确保每个组件只负责一个明确定义的任务。这有助于保持组件简单、可维护,并且易于重用。 2、组件通信:了解组件之间的通信方式。可以使用 @Input 和 @Output 装饰器来实现父子组件

    2024年02月16日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包