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日
    浏览(32)
  • Angular单元测试组件

    文章目录 前言 一、 单元测试是什么? 二、配置jasmine karma 三、技术点 1. 变更监测detectChanges 2. 模拟异步fakeAsync 3. Spy 四、单元测试基础结构 1. describe 2. beforeEachafterEach 3. it 4. expect 4.1 断言方法 5. configureTestingModule 6. compileComponents 7. createComponent 8. ComponentFixture 8.1 创建固件

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

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

    2024年01月20日
    浏览(37)
  • Angular 独立组件入门

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

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

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

    2024年02月09日
    浏览(37)
  • angular实现全局组件

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

    2024年02月12日
    浏览(44)
  • Angular组件通信

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

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

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

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

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

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

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

    2024年01月24日
    浏览(16)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包