写点什么

Angular 应用”老手“也未必掌握的十大实用特性

  • 2019-12-19
  • 本文字数:3846 字

    阅读完需:约 13 分钟

Angular应用”老手“也未必掌握的十大实用特性

如果你已经是编写 Angular 应用的”老手“,可能会觉得这篇文章介绍的这些特性自己肯定都很熟悉。但事实未必如此,不信的话等你看完再说。

1. Title

Title 标签是一个 HTML 元素,用于指定网页标题。Title 标签作为给定结果的可点击标题,显示在搜索引擎结果页面(SERP)上。它们对于可用性、SEO 和社交共享而言至关重要。


Angular应用使用 index.html 中的…,在浏览器窗口中设置标题。导航到 Angular 中的组件不会更改标题。


那么你知道吗,其实可以通过组件来设置浏览器标题。


Angular 在 @angular/platform-browser 中有一个 Title 服务。我们只需将 Title 服务注入到组件中,并使用 setTitle 方法设置标题即可。


import { Title } from "@angular/platform-browser"@Component({    ...})export class LoginComponent implements OnInit {    constructor(private title: Title) {}    ngOnInit() {        title.setTitle("Login")    }}
复制代码


当我们导航到 LoginComponent 时,浏览器的标题将设置为“Login”。


我们可以在项目的所有组件中重复这一操作,这样在导航到它们的位置时,浏览器窗口将更改为组件设置的标题。

2. Meta

我们的 Angular 应用渲染的内容大部分来自于 index.html。我们的应用会拥有在 index.html 中设置的一个 meta 标签。Angular 在 @angular/platform-browser 中有一个 Meta 服务,使我们能够从组件中设置 meta 标签。


这是很有用的功能,可以更好地进行搜索引擎优化(SEO),也可以将组件拥有的页面共享给社交媒体。


根据维基百科的定义:


Meta是 HTML 和 XHTML 文档中使用的标签,用于提供网页的结构化元数据。它们是网页 head 的一部分,可以在同一页面上使用具有不同属性的多个 Meta 元素。Meta 元素可用于指定页面描述、关键字,以及其他 head 元素和属性未提供的元数据。


Meta 元素提供有关网页的信息,搜索引擎可以在这些信息的帮助下正确地分类网页。


它用起来非常容易,只需从 @angular/platform-browser 导入 Meta,并将其注入到我们的组件中即可。


import { Meta } from "@angular/platform-browser"@Component({    ...})export class BlogComponent implements OnInit {    constructor(private meta: Meta) {}    ngOnInit() {        meta.updateTag({name: "title", content: ""})        meta.updateTag({name: "description", content: "Lorem ipsum dolor"})        meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})        meta.updateTag({name: "site", content: "My Site"})    }}
复制代码


有了它,我们的 BlogComponent 可以渲染在 Facebook 和 Twitter 等网页上,并带有我们组件的描述信息,提供标题、图像和注释。


这个你也听过吗?

3. 覆盖模板插值

我们都在模板中使用默认模板插值器{{}}来显示组件中的属性。


开头为{{,结尾为}}。如果我们在它们之间放置一个属性成员,它将渲染在浏览器 DOM 上。


你知道我们可以用自己的符号覆盖默认的封装开始和结束定界符吗?很简单,在 Component 装饰器的 interpolation 属性中指定即可。


@Component({    interpolation: ["((","))"]})export class AppComponent {
复制代码


AppComponent 模板中使用的插值将不再是“{{}}”,而是“(())”。


@Component({    template: `        <div>            ((data))        </div>    `,    interpolation: ["((","))"]})export class AppComponent {    data: any = "dataVar"}
复制代码


在渲染时,将渲染“dataVar”以代替((data))。

4. Location

我们可以使用 Location 服务获取当前浏览器窗口的 URL。根据所使用的 LocationStrategy,Location 将存储 URL 的路径或 URL 的哈希段。


有了 Location,我们可以转到一个 URL,在平台的历史记录中向前或向后跳转,更改浏览器 URL,替换平台的历史记录栈中的顶部项等。


我们从 CommonModule 注入 Location 服务,就可以使用它了。


import { Location } from "@angular/common"@Component({    ...})export class AppComponent {    constructor(private location: Location) {}    navigatTo(url) {        this.location.go(url)    }    goBack() {        location.back()    }    goForward() {        location.forward()    }}
复制代码

5. DOCUMENT

有时我们想要获取文档模型,以便我们可以从 Angular 应用中执行 DOM 操作。


使用 DOCUMENT 就可以做到这一点。DOCUMENT 是表示主要渲染上下文的 DI 令牌。在浏览器中这就是 DOM 文档。它以与环境无关的方式提供 DOM 操作。


注意:当应用程序上下文和渲染上下文不同时(例如将应用程序运行到 Web Worker 中时),Document 可能在应用程序上下文中不可用。


假设我们在 html 中有一个元素:


<canvas id="canvas"></canvas>
复制代码


我们可以注入 DOCUMENT 来获取画布 HTMLElement:


@Component({})export class CanvasElement {    constructor(@Inject(DOCUMENT) _doc: Document) {}}
复制代码


我们可以调用 getElementById(),获得画布的 HTMLElement。


@Component({})export class CanvasElement {    constructor(@Inject(DOCUMENT) _doc: Document) {}    renderCanvas() {        this._doc.getElementById("canvas")    }}
复制代码


我们还可以使用 ElementRef 和模板引用来安全地执行此操作,理解即可。


警告:要小心!直接与 DOM 交互是危险的,并且可能带来 XSS 风险。

6. @Attribute 装饰器

我们在 Angular 应用中主要使用 Component、Module 和 Directive 装饰器。


我们有一个 Attribute 装饰器,它使我们能够消除对静态字符串的更改检测,这样在传递静态字符串时就不会降低性能了。


Attribute 装饰器的值只检查一次,之后就不再检查了。它们的用法类似于 @Input 装饰器:


@Component({    ...})export class BlogComponent {    constructor(@Attribute("type") private type: string ) {}}
复制代码

7. HttpInterceptor

就像美国的防空网一样,这是 Angular 中非常强大的功能。它会拦截 HttpRequest 并处理它们。


大多数拦截器会在调用 next.handle(transformedReq),以将传出请求传递到链中的下一个拦截器之前对请求进行转换。


在极少数情况下,拦截器可能希望自己完全处理请求,而不是委托给链的其余部分。这种行为是允许的。


HttpInterceptor 可用于:


  • 认证

  • 缓存

  • 伪后端

  • URL 转换

  • 修改标头


它用起来很简单,首先创建一个服务并实现 HttpInterceptor 接口。


@Injectable()export class MockBackendInterceptor implements HttpInterceptor {    constructor() {}    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {        ...    }}
复制代码


然后将其它插入你的主模块中:


@NgModule({    ...    providers: [        {            provide: HTTP_INTERCEPTORS,            useClass: MockBackendInterceptor,            multi: true        }    ]    ...})export class AppModule {
复制代码

8. AppInitializer

有时我们确实希望在 Angular 应用启动时运行一段代码,这段代码可能会加载一些设置,比如加载缓存,加载配置或进行某些签入。AppInitialzer 令牌可以帮助你解决这一问题。


APP_INITIALIZER:初始化应用时执行的函数。


它很容易使用。如果我们希望在 Angular 应用启动时执行以下 runSettings 函数:


function runSettingsOnInit() {    ...}
复制代码


只需转到主要模块 AppModule,并将它添加到其 NgModule 装饰器中的 provider 部分:


@NgModule({    providers: [        { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }    ]})
复制代码

9. 引导监听器

就像 AppInitializer 一样,Angular 还有一项功能,使我们能够在引导组件时进行侦听。它就是 APP_BOOTSTRAP_LISTENER。


通过此令牌提供的所有回调将为每个引导的组件调用。


我们有很多理由来侦听组件引导,例如,Router 模块使用它来破坏和创建基于路由导航的组件。


要使用 APP_BOOTSTRAP_LISTENER,请使用回调函数将其添加到 AppModule 的 provider 部分中:


@NgModule({    {        provide: APP_BOOTSTRAP_LISTENER, multi: true,         useExisting: runOnBootstrap    }    ...})export class AppModule {}
复制代码

10. NgPlural

复数表示是一个问题。我们需要一直根据单数/复数值来在我们的应用中正确定义语法。某些网站会使用(s)。比如:


1 component(s) removed3 component(s) removed
复制代码


读者应在阅读时自行删除或添加(s)****。


Angular 在其 NgPlural 指令中为我们解决了这个问题。


NgPlural 基于数字值来添加/删除 DOM 子树,为复数量身定制。


显示与切换表达式值匹配的 DOM 子树,否则显示与切换表达式的复数类别匹配的 DOM 子树。


要使用此指令,你必须提供一个容器元素,该元素将[ngPlural]属性设置为一个 switch 表达式。具有[ngPluralCase]的内部元素将根据其表达式显示:


<p [ngPlural]="components">    <ng-template ngPluralCase="=1">1 component removed</ng-template>        <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>    </p>
复制代码


看到了吧,当显示“已删除的组件”数量时,我们使用 NgPlural 指令删除了(s)。它将显示:


// if 1 component1 component removed// if 5 components5 components removed
复制代码

小结

全篇看下来,有没有丧失信心、觉得自己老了?


不用担心,我们所有人都有知识盲区。上面所列的内容只是其中一部分,Angular 既庞大又复杂。可以试着查看其他 Angular 相关的内容,看看是否可以找出你以前从未听说过的特性。期待你的发现。


原文链接


10 Useful Angular Features You’ve Probably Never Used


2019-12-19 15:212601

评论

发布
暂无评论
发现更多内容

如何学习ABAQUS有限元仿真分析软件

思茂信息

abaqus abaqus软件 abaqus有限元仿真 有限元分析 有限元仿真

含CPU芯片的PCB可制造性设计问题详解

华秋PCB

工具 芯片 PCB PCB设计 可制造性

基于ClickHouse解决活动海量数据问题 | 京东云技术团队

京东科技开发者

数据库 Clickhouse 数据处理 企业号 7 月 PK 榜

Nautilus Chain NautDID NFT 将上主网,Layer3 数字身份时代开启

西柚子

程序员「求生宝典」!AI大发展下的程序员求生指南,干货满满

Openlab_cosmoplat

六步带你体验EDS交换数据全流程

华为云开发者联盟

云计算 后端 华为云 华为云开发者联盟 企业号 7 月 PK 榜

用友BIP:助力企业数智化转型,实现数智化国产替代

用友BIP

国产替代

Leangoo领歌敏捷工具提供哪些Scrum敏捷培训?

顿顿顿

敏捷开发 敏捷开发管理工具 scrum工具 scrum培训 敏捷培训

常用语言的线程模型(Java、go、C++、python3) | 京东云技术团队

京东科技开发者

Java c++ Go 线程模型 企业号 7 月 PK 榜

七年老程序员的五六月总结:十一件有意义的事

拭心

android 程序员 程序人生 成长记录

等保定级标准是怎样的?是否系统定级越低越好?

行云管家

网络安全 等保 堡垒机 等级

大模型时代,科技企业入局能源行业需要新范本

TE智库

新能源 特斯联

如何使用openEuler WSL sideload

openEuler

Linux 前端 操作系统 wsl openEuler

华为云云原生数据库,让企业离应用更进一步

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 7 月 PK 榜

Seal AppManager如何基于Terraform简化基础设施管理

SEAL安全

Kubernetes Terraform 平台工程 SealAppManager 企业号 7 月 PK 榜

NFTScan | 07.10~07.16 NFT 市场热点汇总

NFT Research

NFT\

为什么强调数智底座能力?

用友BIP

数智底座

龙蜥社区首次突破!高性能存储 SIG 现身 LSF/MM/BPF 2023 分享 EROFS 的演进路线

OpenAnolis小助手

开源 高性能存储 龙蜥社区 sig EROFS

等保测评包过是真的吗?安全吗?

行云管家

等保 等级保护 等保测评

书画家点赞!基于飞桨绘制中国水墨山水画

飞桨PaddlePaddle

人工智能 paddle 飞桨 百度飞桨 AIGC

从TL、ITL到TTL | 京东物流技术团队

京东科技开发者

ThreadLocal ThreadLocalMap 企业号 7 月 PK 榜

应对618、双十一等大促期间的高负载,API性能测试应该怎么做?负载测试、基线测试、冒烟测试、浸泡测试、峰值测试和尖峰测试详解

龙智—DevSecOps解决方案

自动化测试 API 测试自动化

识别led显示屏扫描方式及常见分类指南

Dylan

分类 识别 扫描 LED显示屏

一文了解什么是ISO 9001认证,以及在静态分析和代码质量领域有哪些通过此认证的工具

龙智—DevSecOps解决方案

代码扫描 静态代码分析 代码分析

手机直播app源码部署搭建:带货潮流,商城功能!——山东布谷科技创作

山东布谷科技

软件开发 直播 源码搭建 直播APP源码 手机直播源码

任务调度之时间轮实现 | 京东云技术团队

京东科技开发者

定时任务 数据结构与算法 时间轮 企业号 7 月 PK 榜

灵活预算,畅享高性能!月付香港主机助你建设理想网站!

一只扑棱蛾子

香港主机

数智底座成竞争焦点,用友能否再创辉煌?

用友BIP

数智底座

火山引擎DataLeap如何解决SLA治理难题(一):应用场景与核心概念介绍

字节跳动数据平台

数据中台 数据治理 SLA 数据研发 企业号 7 月 PK 榜

Angular应用”老手“也未必掌握的十大实用特性_大前端_Chidume Nnamdi_InfoQ精选文章