写点什么

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:212294

评论

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

架构训练营第10期模块8作业

Geek_4db2d5

高校技术导师云集 OpenHarmony技术峰会“高校技术俱乐部分论坛”举办

Geek_2d6073

带你认识3个J.U.C组件扩展

华为云开发者联盟

开发 华为云 华为云开发者联盟 企业号 3 月 PK 榜

软件测试/测试开发 | 软件项目管理与跨部门沟通协作

测试人

软件测试 自动化测试 测试开发

PostgreSQL:启动与停止

天翼云开发者社区

湖北文旅虚拟数字代言人“胡贝儿”首秀,一点资讯助力地方文旅元宇宙落地

科技热闻

数字先锋| 云端来养牛,致富有“犇”头

天翼云开发者社区

软件测试/测试开发 | 被测项目需求你理解到位了么?

测试人

软件测试 自动化测试 测试开发

采编式AIGC视频生产流程编排实践

百度Geek说

服务编排 AIGC 企业号 3 月 PK 榜 引擎架构

由浅入深,揭秘企业级OLAP数据引擎ByteHouse

字节跳动数据平台

Clickhouse 数据引擎 企业号 2 月 PK 榜

通过源码分析RocketMQ主从复制原理

京东科技开发者

Java 源码分析 RocketMQ 端口 企业号 3 月 PK 榜

无服务器Serverless总结

天翼云开发者社区

关于 App Store 苹果商店价格的那些事(历上最全版)

37手游iOS技术运营团队

apple In App Purchase App Store Connect API app store iTunes Store

Zepoch节点持有人数大突破,Nautilus Chain 或有海量空投

西柚子

2023年了,做SEO还有必要吗?

京东科技开发者

搜索引擎 SEO 搜索算法 SEO优化 企业号 3 月 PK 榜

深入浅出玩转监控宝|网站监控之管理网站监控任务

云智慧AIOps社区

安全 监控宝 云智慧 监控软件 网站监控

XView 架构升级之路

京东科技开发者

架构 框架 企业号 3 月 PK 榜 xview

阿里开源自研高性能核心搜索引擎 Havenask

阿里技术

搜索引擎 AI·OS实践

这样Debug,排查问题效率大大提升...

采菊东篱下

Java

量化合约系统开发程序技术(源码搭建)合约量化开发逻辑方案

I8O28578624

OpenHarmony 3.2 Beta Audio——音频渲染

OpenHarmony开发者

OpenHarmony

SREWorks数智运维平台开源一周年 | 回顾与展望

阿里云大数据AI技术

大数据 开源 运维 企业号 3 月 PK 榜

软件测试/测试开发 | 被测系统架构与数据流分析

测试人

软件测试 自动化测试 测试开发

NFTScan 与 BNB Chain 达成战略合作,成为BNBChain Kickstart 官方数据服务提供商

NFT Research

NFT 数据基础设施

玩转GaussDB 中的SET操作符

华为云开发者联盟

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

热点面试题:箭头函数与普通函数的区别?

Immerse

JavaScript 箭头函数 前端面试题 #热点问题 普通函数

数据库自治平台 KAP 监控告警架构及实例演示

KaiwuDB

数据库· KaiwuDB 数据库自治

中国电信天翼云喜获2022中国电子学会科技进步奖一等奖!三等奖!

天翼云开发者社区

云上贵州:基于鲲鹏DevKit快速开发智能运维平台,性能提升75%

Geek_2d6073

安全可信| 天翼云全栈云原生安全防护平台入选工信部“2022年网络安全技术应用试点示范项目”!

天翼云开发者社区

ChatGPT “眼”中的开源数据库

墨天轮

数据库 ShardingSphere 开源数据库 Tapdata ChatGPT

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