首页 > 其他分享 >Angular Component 内 set 关键字的使用

Angular Component 内 set 关键字的使用

时间:2023-12-12 12:32:26浏览次数:31  
标签:set name Component value 关键字 属性 Angular setter

"set" 关键字在Angular组件的TypeScript代码中通常用于创建和定义类的属性的setter方法。它是一种特殊的方法,负责设置类的私有成员变量的值。通过使用"set"关键字,我们可以在设置属性值时执行一些额外的逻辑,如输入验证、触发事件等。

让我们通过一个简单的例子来说明"set"关键字的用法。考虑一个Angular组件,其中有一个私有成员变量_name,我们希望在设置这个变量的同时,执行一些逻辑。这时就可以使用"set"关键字:

export class MyComponent {
  private _name: string;

  // 使用 set 关键字定义 setter 方法
  set name(value: string) {
    if (value && value.length > 0) {
      this._name = value;
      console.log(`Name set to: ${value}`);
    } else {
      console.error('Invalid name. Please provide a non-empty string.');
    }
  }

  // 其他组件代码...
}

在上面的例子中,我们定义了一个名为name的setter方法,它使用"set"关键字。当外部代码试图设置name属性时,实际上调用的是这个setter方法。在setter方法中,我们添加了一些逻辑来验证输入值是否合法,如果合法,则设置私有成员变量_name的值,并输出一条日志。如果输入值无效,则输出错误消息。

使用这样的setter方法有助于封装组件的内部逻辑,确保对属性的修改是受控的。这也是面向对象编程中封装的一个体现。

在Angular中,"set"关键字通常与属性绑定一起使用。例如,在组件的模板中,我们可以通过属性绑定将某个属性与组件类中的setter方法关联起来:

<!-- 组件模板 -->
<div>{{ myComponentName }}</div>

<!-- 组件类中的 TypeScript 代码 -->
export class MyComponent {
  private _name: string;

  // 使用 set 关键字定义 setter 方法
  set name(value: string) {
    if (value && value.length > 0) {
      this._name = value;
      console.log(`Name set to: ${value}`);
    } else {
      console.error('Invalid name. Please provide a non-empty string.');
    }
  }

  // 在组件的构造函数中创建组件属性
  constructor() {
    this.name = 'DefaultName'; // 这里会调用 setter 方法
  }

  // 在模板中绑定的属性,实际上是调用了 setter 方法
  get myComponentName(): string {
    return this._name;
  }

  // 其他组件代码...
}

在上面的例子中,模板中的myComponentName属性实际上调用了组件类中的name属性的setter方法,因为它们在getter方法中被绑定。这样,我们可以在设置属性时执行一些逻辑,而不仅仅是简单地赋值。

总的来说,"set"关键字是面向对象编程中用于创建setter方法的一种方式,它在Angular中的应用有助于更好地组织和封装组件的逻辑。通过setter方法,我们可以在属性被设置时执行额外的代码,以确保数据的有效性和安全性。

Spartacus 项目里也大量使用了 set 关键字:
type 是 CxInfo Component 经过 @Input 注解修饰后的私有属性,当其在父 Component 里被传递数据进来时,触发第 58 行的 set 关键字定义的 type 方法:

Angular Component 内 set 关键字的使用_Angular


Angular Component 内 set 关键字的使用_成员变量_02



标签:set,name,Component,value,关键字,属性,Angular,setter
From: https://blog.51cto.com/jerrywangsap/8785395

相关文章

  • Angular Renderer2 的作用和使用场景介绍
    下图将cssclasscx-icon添加到hostdom上。最后效果如下:使用的renderer来自:import{Component,ElementRef,HostBinding,Input,Renderer2,}from'@angular/core';Angular的Renderer2是Angular框架中用于操作DOM元素的重要工具之一。Renderer2的主要作用是提......
  • 谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility
    我们知道面向个人用户(toCustomer,简称2C)软件和面向企业级用户(toBusiness,简称2B)的软件,在设计和实现上都存在一些区别,比如个人软件通常注重直观的用户界面和简单易用的设计,其中用户体验是关键,因为个人软件的目标是满足个人用户的需求和偏好。想想我们每天都在刷的抖音和头......
  • 【HarmonyOS】Web组件使用setResponseIsReady+setResponseData实现异步自定义响应数据
    【问题描述】在web组件的自定义响应数据方法如下:Web().onInterceptRequest((event)=>{…})如果需要在callbak中如果使用Promise等获取异步信息,并读取该如何操作 【解决方案】通过setResponseIsReady+setResponseData的方式控制数据返回,先设置setResponseIsReady为fal......
  • uniapp插件市场上架插件,提示components不包含对应包名称的组件
    第一次在uniapp上架了一个小组件,所有的都按照文档填写上传了,但是提交的时候一直提示不行原来是在压缩组件源码的时候出问题,不要把components和static放在一个文件夹下面压缩文件夹,要直接把components和`static``组合压缩就行。这是错误的这是正确的......
  • Redis命令整合(五) Zset型
    有序集合。使用分数score来标记每个元素1.添加元素zaddmathScore98jordan86james77kobe添加了三个元素,分数在前 2.假如添加的元素已经存在的话,则会替换原来的分数。zaddmathScore79kobe则将kobe的分数改为79 3.取某一个元素的分数zscoremathScor......
  • ElasticSearch之Node query cache settings
    对于filter查询,ElasticSearch提供了缓存查询结果的特性,当缓存中存在满足查询条件要求的数据时,直接从缓存中提取查询结果。对于ElasticSearch节点,该节点上的所有shard共享同一个缓存区域。ElasticSearch基于LRU算法来管理缓存中的数据,当空间不足以承载最新的查询操作的结果时,使用......
  • Redis命令整合(四) Set型
    集合类型。元素各不相同没有顺序1.添加元素sadd[keyName][member1][member2]...eg:saddlettersabc2.删除元素srem[keyName][member1][member2]...egsremlettersab3.列出所有元素smembers[keyName]eg:smemberletters4.判断是否存在sismem......
  • [QOJ1359] Setting Maps
    题目链接\(k=1\)的时候显然是最小割。把一个点\(u\)拆成两个点,中间连流量为\(c_u\)的边。那么考虑扩展到\(k\)更大的情况。把上图的每个入点和出点都拆成\(k\)个。把节点\(u\)第\(i\)层入点和第\(i+1\)层入点连接,再把第\(i\)层入点和所有满足\(j>i\)层的出......
  • soapui报错: CXF directory must be set in global preferences
    文章目录下载官网下载网盘下载配置soapui生成代码时报错CXFdirectorymustbesetinglobalpreferences下载需要下载apache-cxf。官网下载官网地址:https://www.apache.org/dyn/closer.lua/cxf/3.5.4/apache-cxf-3.5.4.zip点如下地址即可。Theobjectisinourarchive......
  • Go的Set实现
    Go的Set实现由于Go的内置集合中没有Set的实现,可以用map[type]struct{}要求:1、元素的唯一性2、基本操作:添加、删除、判断是否存在、统计元素数量3、可遍历集合//声明SettypeSetstruct{//利用map,实现的Set集合mapSetmap[string]struct{}}//新增func(s*Set......