首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Angular 7/ Typescript中使用变量类名?

在Angular 7/Typescript中,可以使用变量类名来动态设置元素的类名。以下是一种常见的方法:

  1. 首先,在组件的Typescript文件中定义一个变量,用于存储要应用的类名。例如,我们定义一个名为className的变量。
代码语言:txt
复制
className: string = 'default-class';
  1. 在HTML模板中,使用ngClass指令来动态设置元素的类名。将变量className绑定到ngClass指令的属性值上。
代码语言:txt
复制
<div [ngClass]="className">Hello, World!</div>
  1. 现在,可以通过修改className变量的值来改变元素的类名。例如,在组件的方法中,可以根据某些条件来更新className的值。
代码语言:txt
复制
updateClassName() {
  if (someCondition) {
    this.className = 'new-class';
  } else {
    this.className = 'default-class';
  }
}

这样,当className的值发生变化时,元素的类名也会相应地改变。

关于Angular 7和Typescript的更多信息,可以参考以下链接:

请注意,以上答案中没有提及任何特定的云计算品牌商,如有需要,可以根据具体情况自行选择适合的云计算服务提供商。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WebStorm for Mac(JavaScript开发工具)中文版

WebStorm for Mac(JavaScript开发工具)中文版使用JavaScript解构通过解构,您可以使用非常简洁的语法将数组和对象中的值解压缩到变量中。...Angular项目中的导航更容易在Angular应用程序中,您现在可以使用相关符号...弹出窗口(Ctrl-Cmd-Up / Ctrl + Alt + Home)在不同的组件文件(如TypeScript...对CSS模块的Camel案例支持如果在项目中使用CSS模块,JavaScript文件中的类的代码完成现在将建议带有破折号的类名的驼峰版本。...提取CSS变量使用新的Extract CSS变量重构,您可以使用语法将当前.css文件中值的所有用法替换 为变量var(--var-name)。...键入后 node,IDE将建议文件夹和文件名。输入后npm run,您将看到当前文件中定义的任务列表。

5K50
  • Angular 中结构指令模式 - 它们是什么且怎么使用

    如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式的知识点。...这会将其转换为方括号 [] 中的属性绑定,比如 [ngIf]。 的其余部分,包含类名,插入到 里。...中: Myshopping: string = ''; 我们有一个 MyShopping 变量,它有一个默认值,用于在模块中渲染满足条件的特定元素。...Angular 中我们什么时候需要用结构指令呢? 如果你想在 DOM 中添加或者移除一个元素的时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。...总结 结构指令是 Angular 中很重要的一部分,我们可以通过多种方式使用它们。 希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 本文为译文,采用意译的形式。

    3.8K20

    Web前端面试敲重点知识,14个TypeScript核心基础面试题和答案

    4、什么是 any 类型,何时使用 ? 5、什么是void,什么时候使用void类型 ? 6、TypeScript 中声明变量有哪些不同的关键字? 7、如何书写带有类型注释的函数 ?...8、如何在 TypeScript 中创建对象 ? 9、如何在 TypeScript 中指定可选属性 ? 10、说说枚举在 TypeScript 中是如何工作的 ? 11、什么是参数解构 ?...image.png TypeScript 文件使用.ts 扩展名,而 JavaScript 文件使用.js 扩展名 由于 TypeScript 是 JavaScript 的超集,所有有效的JavaScript...string:表示文本值,例如“javascript”、“typescript”等 number:表示数值,如 1、2、25、36 等 boolean:表示一个变量,它可以具有“真”或“假”值 image.png...image.png 6、TypeScript 中声明变量有哪些不同的关键字? image.png 7、如何书写带有类型注释的函数 ?

    11.5K10

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

    前言:   上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板。...这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...: 注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单的值对局部变量进行初始化之外,什么都不应该做!!!...运行应用程序的端到端 (E2E) 测试 构建应用程序 使用命令添加功能到现有的 Angular 应用程序: 可以使用 ng generate 命令,为已有的 Angular 应用程序添加新的功能: ng...2、配置首页组件路由(多模块路由完美解决): 首先,我们的博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件中配置多个模块的路由

    4K20

    Angular--Module的使用

    Angular 是一个用html 和typescript 构建客户端应用的平台与框架。 它将核心功能和可选功能作为一组TypeScript 库进行实现,你可以把它们导入到你的应用中。 1....NgModule 可以将其组件和一组相关代码(如服务)关联起来,形成功能单元。...imports(导入表) —— 其他模块,本NgModule声明的组件需要使用它们的导出类。 providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。...@NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。...@angular/forms 当要构建响应式表单时 RouterModule @angular/router 当要使用路由功能,并且你要用到RouterLink, forRoot() 和.forChild

    4.9K40

    【Angular专题】——(2)【译】Angular中的ForwardRef

    问题点在哪里 先做一个小声明,我们现在拥有一个AppComponent,并使用DI系统向其中注入了一个NameService,因为我们使用的是Typescript,所以需要做的工作就是在构造函数的参数中声明变量...但是在控制台上却无法得到报错信息,我猜想是因为调试Typescript代码时使用了source map。...从上面的示例中不难看出,如果Javascript解释器对class声明也进行提升处理,就容易在类继承时出现基类未定义的错误。 三. class在使用前必须声明吗?...小结 这个场景并不会经常出现,一般它只在当我们想要注入在同一个文件中声明的类时才会发生,大多数情况下我们在一个文件中只会声明一个类,并且会在文件的头部引入其他依赖的类,以此来保证不会被class不进行变量提升的特性造成困扰...五.补充 以下内容摘录自Angular中文网: 在Typescript里面,类声明的顺序很重要,如果一个类尚未定义,就不能引用它。 这通常都没有问题的,特别是遵循一个文件一个类规则的时候。

    3.2K20

    【TypeScript】入门基础

    创建TypeScript文件使用任何文本编辑器(比如VSCode、Sublime Text、Atom等),创建一个新的文件并将其保存为.ts扩展名,这是TypeScript文件的约定。3....类型注解和类型推断在上面的例子中,我们在变量后面用:来显式地注解类型。这称为类型注解。TypeScript还可以进行类型推断,根据上下文自动推断变量的类型,这在上面的示例中是可行的。5....在命令行中,导航到TypeScript文件所在的目录,然后运行以下命令:tsc filename.ts这将生成一个名为filename.js的JavaScript文件。7....高级类型TypeScript提供了许多高级类型特性,如联合类型、交叉类型、泛型等。这些功能可以更好地定义和处理复杂的数据结构和函数签名。8....TypeScript与框架TypeScript广泛用于构建各种类型的Web应用程序和框架,包括React、Angular、Vue等。它可以增加代码的可读性和可维护性,并为开发人员提供更好的开发体验。

    32330

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    它是如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...简而言之,EventEmitter是在@ angular/core模块中定义的类,由组件和指令使用,用来发出自定义事件。...这通常用在setter中,当类中的值被更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...如何在Angular 2应用程序中使用codelyzer? 所有企业应用程序都会遵循一组编码惯例和准则,以更好的方式维护代码。...要定义应用程序(JavaScript / Typescript)对象的类型,我们应该在应用程序相应模块的models文件夹中,定义接口和实体类。

    17.4K80

    WebStorm 常用功能的使用技巧分享

    代码编辑 代码跳转: Ctrl + 左键 或者 Ctrl + B,可以跳转到函数或者变量的声明位置 调用位置: Alt + F7,查找调用者 自动补全: 最好是修改一下响应时间,Settings->Editors...打开文件: Ctrl + Shift + N 打开类: Ctrl + N 打开函数: Ctrl + F12 “超级”打开: 双击 shift,可以 search anywhere....比如按一次,选中word,按两次,选择表达式, 三次, 整个函数 重构 改名: Shift + F6,修改函数名,变量名,文件名,同时修改所有引用的位置....新技术支持 支持最新技术,如 TypeScript CoffeeScript 最新版、 Angular2、ES6 ES7等,集成 Gulp、Grunt 等工具。...同时,在开发过程中,还可以借助一些开发工具,如Wijmo,这是一款大而全面的前端 HTML5 / JavaScript UI控件集,能为企业应用提供更加灵活的操作体验,现已全面支持Angular 2。

    2.1K80

    在前端中理解MVC服务之 Angular篇(完结)

    在第三篇文章中,应用程序将使用 Angular 构建,该版本来自TypeScript 的第二个版本。因此,本文介绍应用程序从 TypeScript 到Angular的迁移。..."的类变量,该变量在所有用户从纯对象转换为Class的原型对象后存储它们。...但是,我们注意到,前几部分中的许多 DOM 操作代码已通过 Angular 得到解决,它们提供了两个结构指令,如 @ ngFor 和 _ ngIf,它们允许从模板本身轻松操作 DOM。...另一个有趣的点是,Angular 在此示例中帮助我们使用反应形式。有了这些,模板连接到控制器,而无需我们发送处理程序来建立连接。...我建议你从第一篇与JavaScript相关的帖子开始,了解所使用的体系结构。下一步是通过应用 TypeScript(在第二篇文章中)来强化代码,最后查看此文章中的代码已适应框架。

    4.1K20

    2020 年的 JavaScript 后起之秀

    另一方面,我们还有更多经典选项只能在服务器(如 Nest 或 Fastify)中运行。 与 2018 年一样,该类别由 Next.js 领导。...Monorepos 成为主流:Yarn 和 Lerna 被广泛使用,支持 npm 7。 2021 年值得关注的个人精选:Rome,Toast,Turborepo CSS 框架 ?...与更传统的 CSS 框架(如 Bootstrap 或 Bulma)相比,它提供了命名约定,使开发人员可以通过编写类名来设置页面和组件的样式。...后端开发人员可以与 Deno 一起玩,并立即开始使用 TypeScript,而且不必担心依赖关系。...前端开发人员现在可以使用诸如 esbuild,Snowpack 和 Vite 之类的解决方案来更快,更简单地构建工具。 说到工具,NPM 的第 7 版提供了用于在单个存储库中处理多个软件包的工作区。

    2.4K20

    30个小知识让你更清楚TypeScript

    面向对象的语言:TypeScript 提供所有标准的 OOP 功能,如类、接口和模块。 静态类型检查:TypeScript 使用静态类型并帮助在编译时进行类型检查。...module module_name{ class xyz{ export sum(x, y){ return x+y; } } 7、后端如何使用TypeScript?...类型断言本质上是类型转换的软版本,它建议编译器将变量视为某种类型,但如果它处于不同的形式,则不会强制它进入该模型。 9、如何在 TypeScript 中创建变量?...TypeScript 还可以与大多数与 JavaScript 相同的技术接口,例如 Angular 和 jQuery。 19、TypeScript 中的 JSX 是什么?...全局作用域:在任何类之外定义,可以在程序中的任何地方使用。 函数/类范围:在函数或类中定义的变量可以在该范围内的任何地方使用。

    4.8K20

    TypeScript发展历程

    TypeScript 开始引入类、接口、模块等概念,并支持将 TypeScript 代码编译为标准的 JavaScript。...Angular 2 选择 TypeScript(2016):TypeScript 获得了重要的推动力是因为 Angular 团队宣布 Angular 2 将采用 TypeScript 作为主要开发语言。...这使得 TypeScript 在前端开发社区中得到了更广泛的关注和应用。...引入高级类型和工具链(2017 - 2018):在之后的版本中,TypeScript 引入了许多高级类型特性,如条件类型、映射类型、索引访问类型等。...TypeScript 4.0 发布(2020):TypeScript 4.0 引入了变量用途的类型捕获、字符串模板类型、可选的链判断操作符等特性,这些特性使开发者能够更准确地描述代码的意图。

    39600

    30个小知识让你更清楚TypeScript

    面向对象的语言:TypeScript 提供所有标准的 OOP 功能,如类、接口和模块。 静态类型检查:TypeScript 使用静态类型并帮助在编译时进行类型检查。...module module_name{ class xyz{ export sum(x, y){ return x+y; } } 7、后端如何使用TypeScript?...类型断言本质上是类型转换的软版本,它建议编译器将变量视为某种类型,但如果它处于不同的形式,则不会强制它进入该模型。 9、如何在 TypeScript 中创建变量?...TypeScript 还可以与大多数与 JavaScript 相同的技术接口,例如 Angular 和 jQuery。 19、TypeScript 中的 JSX 是什么?...全局作用域:在任何类之外定义,可以在程序中的任何地方使用。 函数/类范围:在函数或类中定义的变量可以在该范围内的任何地方使用。

    3.6K20

    30道TypeScript 面试问题解析

    面向对象的语言:TypeScript 提供所有标准的 OOP 功能,如类、接口和模块。 静态类型检查:TypeScript 使用静态类型并帮助在编译时进行类型检查。...module module_name{ class xyz{ export sum(x, y){ return x+y; } } 7、后端如何使用TypeScript?...类型断言本质上是类型转换的软版本,它建议编译器将变量视为某种类型,但如果它处于不同的形式,则不会强制它进入该模型。 9、如何在 TypeScript 中创建变量?...TypeScript 还可以与大多数与 JavaScript 相同的技术接口,例如 Angular 和 jQuery。 19、TypeScript 中的 JSX 是什么?...全局作用域:在任何类之外定义,可以在程序中的任何地方使用。 函数/类范围:在函数或类中定义的变量可以在该范围内的任何地方使用。

    4.4K20

    给Java程序员的Angular快速指南 | 洞见

    接下来,就跟我开始 Angular 之旅吧。 ? ---- 语言 - TypeScript Angular 使用 TypeScript 作为主要开发语言。...不过,在 Angular 中,TypeScript 装饰器的实际用途就是为类或属性添加注解而已。因此,有些文章中,包括早期的官方文档中,用的都是注解的说法。当然,以后写新文章还是都用装饰器吧。 ?...类与接口 TypeScript 中的类和 ES6 中的类几乎是一样的,和 Java 中的类也很相似。...比如,我们可以在 IntelliJ/WebStorm 中声明某个类实现了一个接口,然后在这个类名上按 alt-enter ,就会出现 “Implement interface XXX” 菜单 —— 就像...对于一次性使用或暂时一次性使用的变量或类型,用字面量和匿名类型很方便,可读性也好,但是如果它要使用两次以上,那就该重构成正式的类型了。

    2.4K42
    领券