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

更新日期: 2019-12-15阅读: 1.9k标签: 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) removed
3 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 component
1 component removed
// if 5 components
5 components removed


小结

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

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

链接: https://fly63.com/article/detial/6939

angular.js和vue.js中实现函数去抖

搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。

你所要知道的所有关于Angular的变化检测机制

如果想像我一样全面的了解Angular的脏值检测机制,除了浏览源代码之外别无他法,网上可没有太多可用信息。大部分文章都提到,Angular中每个组件都自带一个脏值检测器,但是它们都仅仅停留在脏值检测的策略和案例的使用,并没有做太多的深入。

探索 Angular 使用 ViewContainerRef 操作 DOM

每次我读到 Angular 如何操作 DOM 相关文章时,总会发现这些文章提到 ElementRef、TemplateRef、ViewContainerRef 和其他的类。尽管这些类在 Angular 官方文档或相关文章会有涉及,但是很少会去描述整体思路

解决angularJS解决数据显示闪一下的问题?

使用 angular JS 的时候,把 angularJS 放到文件底部,在渲染页面的时候,会出现闪一下的情况。解决办法:1、使用 ng-cloak ;2、将angular.js的引入放到head前,提前加载;3、使用 ng-bind

Angular HMR(热模块替换)功能实现方法

在使用Angular的时候,希望能像VUE那样,修改代码后浏览器不刷新,页面对应修改的组件自动更新的功能。这个功能的名字时HMR (hot module replace)。稍微研究了一下,发现在angular/cli创建的项目中,实现这个不算太难,步骤如下

Angular 6的新功能,特点介绍

Angular 6目的是为了使Angular变得更小,更快,更易于使用。Angular 6版本更加关注底层框架和工具链,同时加快了工具链在Angular中的运行速度,除此以外,这次更新还包括框架包

angular2及其他项目中遇到的问题和解决方法

Angular2项目日常开发中所遇问题及解决方案记录:angular-cli修改域名及端口号、解决双击变蓝的问题、修改浏览器滚动条的默认样式等等

angular动态绑定样式以及改变UI框架样式的方法

ngClass要绑定的类名会在tr根据数据循环生成html的过程中调用组件中定义的isHideClass方法,并把i(index)带过去让方法使用根据方法逻辑返回的类名去绑定写好的样式

Angularjs的$http异步删除数据详解及实例

这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。

angularJS自定义服务的几种方式

在angularJS中定义服务共有四种常见的方式:factory,service,provider,constant,value.使用形式的不同:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!