Angular (TypeScript)：如何按类滚动到所选元素 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

对Angular应用程序的新检查对于Angular应用程序，WebStorm添加了17项新检查，可帮助您在键入时检测应用程序中的Angular特定错误，并建议快速修复。...Angular项目中的导航更容易在Angular应用程序中，您现在可以使用相关符号...弹出窗口（Ctrl-Cmd-Up / Ctrl + Alt + Home）在不同的组件文件（如TypeScript...对CSS模块的Camel案例支持如果在项目中使用CSS模块，JavaScript文件中的类的代码完成现在将建议带有破折号的类名的驼峰版本。...最近的位置弹出在最近的位置弹出（Cmd的移-E / 按Ctrl + Shift + E）是一种新的方式浏览各地的项目。它显示了最近在编辑器中打开的所有文件和代码行的列表。...所选文件类型的软包装您现在可以在编辑器中为特定文件类型启用软包装。为此，请打开“首选项/设置”| 编辑| 常规并在软包装文件字段中指定文件类型。

6.7K5 0

Angular 主从组件

此刻，HeroesComponent 同时显示了英雄列表和所选英雄的详情。把所有特性都放在同一个组件中，将会使应用“长大”后变得不可维护。...HeroDetailComponent 将用来表示所选英雄的详情。...存放组件类 HeroDetailComponent 的 TypeScript 文件。 HeroDetailComponent 类的测试文件。...你不用修改 HeroesComponent 类，但是要修改它的模板。...从 HeroesComponent 的 selectedHero 属性绑定到目标元素的 hero 属性，并映射到了 HeroDetailComponent 的 hero 属性。

1.6K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

Angular: 最佳实践

类型规范 Typing 我们主要是用 TypeScript 去编写 Angular（也许你只是用 JavaScript 或者谷歌的 Dart 语言去写），Angular 被称为 TYPEScript 也是有原因的...组件 Component 组件是 Angular 的核心特性，如果你设法让它们被组织得井井有条，你可以认为你工作已经完成了一半。考虑拥有一个或者几个基本组件类。..., status: Statuses.Read} ]; statuses = Statuses } 复制代码这里，我们为每个包含未读通知的 HTML 元素添加了 unread 类。...表单，那么将这些逻辑移动到一个基础类会更友好...但是你不需要继承 AbstractBaseComponent，因为不是每个组件都有 form 表单。...所以本文着重介绍 Angular 应用中的 TypeScript 的内容。希望本文能够帮助你编写更干净的代码，帮你更好组织你的应用结构。

4.3K4 0

Angular 主从组件

1.6K4 0

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

不过，在 Angular 中，TypeScript 装饰器的实际用途就是为类或属性添加注解而已。因此，有些文章中，包括早期的官方文档中，用的都是注解的说法。当然，以后写新文章还是都用装饰器吧。 ?...类与接口 TypeScript 中的类和 ES6 中的类几乎是一样的，和 Java 中的类也很相似。...比如，我们可以在 IntelliJ/WebStorm 中声明某个类实现了一个接口，然后在这个类名上按 alt-enter ，就会出现 “Implement interface XXX” 菜单 —— 就像...剩下的那些脏活儿 Angular 都会帮你搞定。不过，Angular 关心的只是“要有” VM，至于你如何生成这个 VM，它并不会做任何假设和限制。自由混搭与切换你想怎么生成 VM？...组件与指令在用途上的区别是，组件充当搭建界面的砖块，它的地位和 HTML 元素并无区别；而指令用于为 HTML 元素（包括组件）添加能力或改变行为。

3K4 2

前端框架与库 - Angular基础：组件、模板、服务

Angular 是一款由 Google 维护的流行前端框架，用于构建动态的 Web 应用。它基于 TypeScript，提供了丰富的功能，包括组件化架构、数据绑定、依赖注入等。...本文将深入浅出地介绍 Angular 中的组件、模板和服务，探讨常见问题、易错点及如何避免，并通过代码示例加深理解。组件组件是 Angular 的核心构建块，每个应用都是由多个组件组成的。...'; }}模板Angular 的模板语言允许你在 HTML 中嵌入 TypeScript 表达式，使用插值表达式、属性绑定、事件绑定等语法糖。...插值表达式：{{ expression }}，用于显示组件类中的数据。属性绑定：[property]="expression"，用于绑定组件类中的属性到元素的属性。...事件绑定：(event)="function()"，用于绑定组件类中的方法到元素的事件。服务服务是 Angular 中用于封装业务逻辑的类，通常用于数据获取、状态管理等。

8661 0

前端框架与库 - Angular基础：组件、模板、服务

Angular 是一款由 Google 维护的流行前端框架，用于构建动态的 Web 应用。它基于 TypeScript，提供了丰富的功能，包括组件化架构、数据绑定、依赖注入等。...本文将深入浅出地介绍 Angular 中的组件、模板和服务，探讨常见问题、易错点及如何避免，并通过代码示例加深理解。组件组件是 Angular 的核心构建块，每个应用都是由多个组件组成的。...'; } } 模板 Angular 的模板语言允许你在 HTML 中嵌入 TypeScript 表达式，使用插值表达式、属性绑定、事件绑定等语法糖。...插值表达式：{{ expression }}，用于显示组件类中的数据。属性绑定：[property]="expression"，用于绑定组件类中的属性到元素的属性。...事件绑定：(event)="function()"，用于绑定组件类中的方法到元素的事件。服务服务是 Angular 中用于封装业务逻辑的类，通常用于数据获取、状态管理等。

1K1 0

Angular快速学习笔记（2） -- 架构

Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身使用 TypeScript 写成的。...它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。全新的Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。...Angular 本身使用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。 1....Angular充分利用了装饰器（java里的annotation）来标识类的类型，并在装饰器中提供元数据（metadata）来告知ng如何使用它们。...如何使用：在 Angular 中，要把一个类定义为服务，就要用 @Injectable 装饰器来提供元数据，以便让 Angular 可以把它作为依赖注入到组件中使用 @Injectable 装饰器来表明一个组件或其它类

7.3K2 1

【Angular专题】——（2）【译】Angular中的ForwardRef

但是在控制台上却无法得到报错信息，我猜想是因为调试Typescript代码时使用了source map。...无论如何，当我们在调试器中打开Pause on caught exceptions功能时，就会在Angular框架中捕获这个错误： Cannot resolve all parameters for...我们理解了class为什么不适合被提升执行顺序，这对于之前的Angular的示例来说有什么指导意义呢？我们只能通过将NameService移动到代码顶部的方式来解除之前的报错吗？...五.补充以下内容摘录自Angular中文网: 在Typescript里面，类声明的顺序很重要，如果一个类尚未定义，就不能引用它。这通常都没有问题的，特别是遵循一个文件一个类规则的时候。...但有时候循环引用可能无法避免，当类A引用类B，同时B又引用A时，就会陷入困境：它们中的某一个必须先定义。 forwardRef( )建立一个间接引用，供Angular随后解析。

5.1K2 0

Angular 显示英雄列表

它会为列表中的每项数据复写它的宿主元素。在这个例子中就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...click 外面的圆括号会让 Angular 监听这个元素的 click 事件。当用户点击时，Angular 就会执行表达式 onSelect(hero)。...给所选英雄添加样式所有的元素看起来都是一样的，因此很难从列表中识别出所选英雄。如果用户点击了“Magneta”，这个英雄应该用一个略有不同的背景色显示出来，就像这样： ?...所选英雄的颜色来自于你前面添加的样式中的 CSS 类 .selected。所以你只要在用户点击一个时把 .selected 类应用到该元素上就可以了。...Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。

5.4K3 0

Angular 显示英雄列表

它会为列表中的每项数据复写它的宿主元素。在这个例子中就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...click 外面的圆括号会让 Angular 监听这个元素的 click 事件。当用户点击时，Angular 就会执行表达式 onSelect(hero)。...给所选英雄添加样式所有的元素看起来都是一样的，因此很难从列表中识别出所选英雄。...如果用户点击了“Magneta”，这个英雄应该用一个略有不同的背景色显示出来，就像这样：所选英雄的颜色来自于你前面添加的样式中的 CSS 类 .selected。...所以你只要在用户点击一个时把 .selected 类应用到该元素上就可以了。 Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。

6.1K7 0

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

启动 src是开发目录，生产打包后会产生一个dist目录；初步说下你从启动到浏览器看到app works!...，从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块，比如你要在组件内用到一些表单元素或者数据绑定，不然会报错...常见模板指令用法解释 {{item | SliceStr:1:2:'...' }}: 可以响应组件内对应的item字段值变化， |是管道，支持多个管道，支持内置管道和自定义管道，:跟随是管道的参数，后续文档我写一个如何自定义管道的文章...最最最常用的内置指令样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象，用来动态判断增加多个样式 [class.a]或者[style.font-size]:单一操作类或者某个行内样式...其他的一丢丢废话：若是学会了ng2技术栈，其实你过程接触了Typescript，Rxjs，es6&7等

7.5K2 0

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

在 Angular 中，有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。结构指令是 Angular 中最强大的特性之一，然而它们却频繁被误解。...如果你对学习结构指令感兴趣，那么现在我们就来接着阅读，并了解它们是什么，它们有什么用以及如何在项目中使用它们。你将学到什么在本文中，你将学到关于 Angular 结构指令模式的知识点。...Angular 结构指令是什么？ Angular 结构指令是能够更改 DOM 结构的指令。这些指令可以添加、移除或者替换元素。结构指令在其名字之前都有 * 符号。... 的其余部分，包含类名，插入到里。...Angular 中我们什么时候需要用结构指令呢？如果你想在 DOM 中添加或者移除一个元素的时候，你就应该使用结构指令。当然，我们还可以使用它们来更改元素 CSS 样式，或者添加事件监听器。

5.1K2 0

解读移动端的跨平台开发：TypeScript + Angular

摘要 Google技术经理陈亮将为大家介绍TypeScript和Angular是什么以及如何利用TypeScript和Angular进行移动端的跨平台介绍。 What’s TypeScript？...TypeScript Type System TypeScript自带了一个编译器，通过一些简单的配置tsconfig.json就可以把TypeScript转换成ES5或ES6。...Angular Tooling Angular的工具也很强大，有AOT、Angular Universal和Angular CLI帮助大家去快速开发项目。...每一个元素都会最终成为一个原生的元素，而因为它用的是Angular的语法，广大的前端开发同学们可以很熟悉的上手，一目了然。...每一个元素都会最终成为一个原生的元素。要注意的是，它所有的语法和Angular是一样的，所以在渲染的过程中不会有任何问题。

3.8K8 0

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

介绍本文是该系列中的第三篇，旨在了解 MVC 体系结构如何创建前端应用程序。目的是了解如何构建前端应用程序。...在第三篇文章中，应用程序将使用 Angular 构建，该版本来自TypeScript 的第二个版本。因此，本文介绍应用程序从 TypeScript 到Angular的迁移。...了解前端的 MVC 服务：TypeScript 点击直达第 3 部分。了解前端的 MVC 服务：Angular 点击直达项目架构什么是MVC架构？..."的类变量，该变量在所有用户从纯对象转换为Class的原型对象后存储它们。...教程，而是一系列的变化，你可以看到Web应用程序从JavaScript到TypeScript到Angular的演变。

4.9K2 0

Angular2、Ionic、TypeScript、es6的关系？

自从接触angular2以来，组长就提到了3个对于我来说是新东西的东西： angular2 typescript es6 ionic 其实对于这3个东西来说，我根本搞不清楚他们之间的关系，突然之间意识到...Angular 2并不是一个MVC框架，而是基于组件（component）的框架。在Angular 2中，应用是松耦合组件所组成的树。 typescript TypeScript是ES6的超集。...比如在Angular2中，用TypeScript明显好于ES6。 -- 某网友 TypeScript的开发者c#之父，所以这个TypeScript的很多语言特性是从c#中移过来的。...Ionic为它自己的组件提供了一组指令，因此开发者能够使用Angular创建自定义HTML元素的能力定义Ionic UI组件。...@Component这个Annotation告诉Angular,这个类是一个组件，这个@View，给出这个组件关于视图相关信息，在这里，他是一个HTML模板。

6.8K3 0

AngularDart4.0 英雄之旅-教程-04明细顶

Hero类分开使用并将Hero类从app_component.dart 中移动到它自己的文件中，创建lib/src文件夹来装Hero源文件：lib/src/hero.dart class Hero...当用户点击英雄的名字时，所选择的英雄被初始化。...将添加所选的CSS类。...当表达式为false时，Angular删除选定的类。 ===运算符测试给定的对象是否相同。在模板语法指南中阅读有关[class]绑定的更多信息。 ...您将Hero类移到lib / src下的自己的文件中。你增加了选择英雄和显示英雄的细节的能力。您了解了如何在组件模板中使用核心指令ngIf和ngFor。

4.3K3 0

纯前端控件集 WijmoJS 2018V2发布，在React、Vue和Angular中更易用

支持Angular 6和TypeScript 2.7 WijmoJS 已经全面支持Angular 6.0.0版。...目前所做的工作是将所有Demo示例升级到Angular V6，并将WijmoJS 支持的TypeScript版本升级到V2.7。...例如，WjcFlexGrid组件类扩展了FlexGrid控件类。这也意味着当WijmoJS 用于“Web组件模式”时，基础WijmoJS 控件类扩展了HTML 元素类。...子组件直接从HTMLElementclass继承，底层 WijmoJS 类实例可通过组件的特殊控件属性访问。可以使用组件元素上的属性定义 WijmoJS 类属性。...随着新版本上线，WijmoJS 添加了Web Components In Angular示例，演示了如何在Angular应用程序中使用 WijmoJS Web组件。

8.8K2 0

Angular 5.0.0发布！

TypeScript转换现在，Angular编译器底层的工作机制是TypeScript转换，从而让递增式重新构建快了很多。...TypeScript转换是TypeScript 2.3新增的一个特性，可以让我们深入到标准TypeScript编译管道。在打开AOT标签的情况下，运行 ng serve就可以利用上述机制。...新的路由器生成周期事件我们给路由器添加了新的生命周期事件，让开发者可以跟踪running guard启动到激活完成的各个阶段。...新的事件（按顺序）是 GuardsCheckStart、 ChildActivationStart、 ActivationStart、 GuardsCheckEnd、 ResolveStart、 ResolveEnd...} else if (e instanceof ChildActivationEnd) { spinner.end(e.route); } }); } } 如何更新

6K4 0

「前端架构」React,Angular还是Vue，太难选了？看完秒懂。

Angular 是为了企业 Angular更像是一个使用HTML和TypeScript构建应用程序的平台。它由不同的TypeScript库组成，可以导入到项目中，比如路由或ajax调用。...在React中提供具有根DOM元素的外部库很容易，并且只处理其生命周期。这就是流行的react-leaflet库如何用react接口包装纯JavaScript单张库。...每个开发人员都应该意识到Vue无法检测到的这些情况：对象的属性添加和删除使用相应属性修改数组长度按索引直接分配数组元素 JavaScript本身的局限性导致了这些问题，Vue团队对此无能为力。...JSX也类似于HTML，但有一些区别，比如类名和camelCase命名约定。单向数据流和不变状态是最难理解的部分。但一旦你得到它，其他一切都很容易。...Angular的学习曲线要陡得多，因为它是这三个框架中最复杂的。TypeScript和RxJS对于Angular开发是必需的，因此开发人员也必须了解它们。

7.1K4 0

点击加载更多

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

Angular 主从组件

Angular: 最佳实践

Angular 主从组件

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

前端框架与库 - Angular基础：组件、模板、服务

前端框架与库 - Angular基础：组件、模板、服务

Angular快速学习笔记（2） -- 架构

【Angular专题】——（2）【译】Angular中的ForwardRef

Angular 显示英雄列表

Angular 显示英雄列表

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

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

解读移动端的跨平台开发：TypeScript + Angular

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

Angular2、Ionic、TypeScript、es6的关系？

AngularDart4.0 英雄之旅-教程-04明细顶

纯前端控件集 WijmoJS 2018V2发布，在React、Vue和Angular中更易用

Angular 5.0.0发布！

「前端架构」React,Angular还是Vue，太难选了？看完秒懂。

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐