首页
学习
活动
专区
工具
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,您将看到当前文件定义的任务列表。

4.9K50
  • 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】应用路由文件配置多个模块的路由

    3.9K20

    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等。它可以增加代码的可读性和可维护性,并为开发人员提供更好的开发体验。

    29430

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

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

    17.3K80

    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。

    2K80

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

    在第三篇文章,应用程序将使用 Angular 构建,该版本来自TypeScript 的第二个版本。因此,本文介绍应用程序从 TypeScriptAngular的迁移。..."的变量,该变量在所有用户从纯对象转换为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

    TypeScript发展历程

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

    31700

    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.7K20

    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

    何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

    Angular CLI, Node.js, and Build Tools,作者为Ahmed Bouchefra 在本教程,我们将学习如何在 Windows 安装 Angular CLI 并使用它来创建...什么是 Angular CLI? Angular CLI 是用于初始化和使用 Angular 项目的官方工具。它使您免于复杂配置和构建工具( TypeScript、Webpack 等)的麻烦。...近年来,它还被用来发布前端包和库, Angular、React、Vue.js 甚至 Bootstrap。...它还会询问您要使用的样式表格式(例如 CSS)。选择您的选项并按 Enter 键继续。 之后,您将使用目录结构和一堆配置和代码文件创建项目。它将主要采用 TypeScript 和 JSON 格式。...结论 在本教程,我们了解了如何在 Windows 计算机上安装 Angular CLI,并使用它从头开始初始化一个新的 Angular 项目。

    36400
    领券