使用Angular实现面包屑导航

面包屑导航(Breadcrumb Navigation)这个概念来自童话故事“汉赛尔和格莱特”,当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。

阅读更多

Angular应用如何使用百度统计

Angulartics2 是一个用于 Angular 应用程序的分析工具。它可以自动跟踪导航事件并将其发送到您的分析服务提供程序,例如百度统计, Google Analytics 等。您可以通过运行npm i angulartics2在项目中开始使用 angulartics。

阅读更多

Angular Sentry前端错误监控

本教程主要讲述, Angular 项目如何整合 Sentry 实现前端应用错误上报.

1. 什么是 Sentry

sentry 是一个基于 Django 构建的现代化的实时事件日志监控、记录和聚合平台,主要用于如何快速的发现故障。支持几乎所有主流开发语言和平台,并提供了现代化 UI,它专门用于监视错误和提取执行适当的事后操作所需的所有信息,而无需使用标准用户反馈循环的任何麻烦。官方提供了多个语言的 SDK.让开发者第一时间获悉错误信息,并方便的整合进自己和团队的工作流中.官方提供 saas 版本免费版支持每天 5000 个 event.

sentry 支持自动收集和手动收集两种错误收集方法.我们能成功监控到 vue 中的错误、异常,但是还不能捕捉到异步操作、接口请求中的错误,比如接口返回 404、500 等信息,此时我们可以通过 Sentry.caputureException()进行主动上报。使用 sentry 需要结合两个部分,客户端与 sentry 服务端;客户端就像你需要去监听的对象,比如公司的前端项目,而服务端就是给你展示已搜集的错误信息,项目管理,组员等功能的一个服务平台。

这个平台可以自己搭建,也可以直接使用 sentry 提供的平台(注册可用),当然如果是公司项目,当然推荐自己搭建.

阅读更多

如何替换 Angular 的CanActivate接口

在本文中,我们将探讨 Angular 的“CanActivate”接口的弃用,并讨论如何用推荐的解决方案替换它。我们将介绍官方文档的建议以及解决此已弃用警告的替代解决方案。

阅读更多

Angular 14 有哪些更新

我们很高兴地宣布 Angular v14 发布!从类型化表单和独立组件到 Angular CDK(组件开发工具包)中的新原语,我们很高兴分享每个功能如何使 Angular 变得更强大。

自上一个版本以来,我们完成了两项主要的征求意见请求搞 (RFC),这为整个 Angular 社区提供了针对提议的更改提供设计反馈的机会。因此,我们的严格类型反应表单 RFC解决了我们的#1 GitHub 问题,并且我们的独立 API RFC引入了一种更简单的方法来编写 Angular 应用程序。

我们还将 Angular 组织中存储库中的默认分支重命名为 main,以履行我们对包容性社区的承诺。

此外,此版本还包括由社区成员直接贡献的许多功能和错误修复,从添加路由器强类型到更多 tree-shakable 错误消息。我们很高兴强调 RFC 和社区如何继续使 Angular 成为更多开发人员的选择和拥有更好的开发人员体验!

阅读更多

Angular 15 有哪些更新?

在过去的一年里,我们删除了 Angular 的旧版编译器和渲染管道,这使得在过去几个月内实现了一系列开发人员体验的改进。Angular v15 是这方面的巅峰之作,它进行了数十项改进,带来了更好的开发人员体验和性能。

阅读更多

Angular 17 有哪些更新?

上个月是 Angular 红盾诞生 13 周年。AngularJS 是新一波 JavaScript 框架的起点,旨在支持对丰富 Web 体验日益增长的需求。今天,我们凭借新的外观和一系列前瞻性功能,通过版本 17 带领大家走向未来,为性能和开发人员体验设定了新标准。

阅读更多

Angular 16 有哪些更新?

六个月前,我们通过将 standalone API 从开发者预览版中升级到稳定版,在 Angular 的简单性和开发者体验方面达到了一个重要的里程碑。今天,我们很高兴与大家分享,我们将继续保持 Angular 的势头,推出自 Angular 首次推出以来最大规模的版本, 在反应性、服务器端渲染和工具方面取得了巨大飞跃。所有这些都伴随着针对功能请求的数十项用户体验改进,GitHub 上总共有超过 2500 个点赞!

这篇文章包含大量内容,涵盖了我们在过去六个月中所做的大部分改进。

阅读更多

异步初始化MatPaginator

1. 问题描述

我们在组件中初始化MatPaginator,如

@ViewChild(MatPaginator) paginator: MatPaginator;

并将其分配给在我们的组件中定义的MatTable DataSource

matTableDataSource.paginator=this.ginator;

当使用带有*ngIf组合的async管道异步初始化数据源时,这在用例中不起作用。

阅读更多

在TypeScript和Angular中使用Getter和Setter

getter 和 setter 是一种众所周知的模式,在不同的语言中使用。在本文中,我想通过 TypeScript 中的示例帮助您理解 getter 和 setter。看看它如何在 Angular 应用程序中发挥作用。

阅读更多

Angular中使用forroot和forchild

在本文中我们将深入探讨一些您可能已经见过的 Angular 模式和方法。我将讨论 Angular 管理依赖项辑器配置信息中经常会使用到的 forRoot 和 forChild 方法。

阅读更多

Angular独立组件介绍

Angular 14 引入了独立组件——该组件不属于任何 ngModule 的一部分,可以与其他独立或基于模块的组件一起使用。

从 Angular 14 开始,您可以创建整个应用程序,而无需制作任何自定义 Angular 模块,这可以通过使用独立组件来实现,这些组件提供了创建 Angular 应用程序的简化方法。

阅读更多

在Angular中使用async-await特性

Promise 和回调函数是在 JavaScript 中编写异步代码的构建块。

在 Angular 应用程序中,我们可以使用 Rx.js 来利用 Observables、Subject、BehaviorSubject 等的强大功能,以优雅的方式编写异步代码。

随着最新版本的 ECMA Script 草案,JavaScript 开始支持“异步等待”功能。

ECMAScript 最新草案 (ECMA-262)

阅读更多