你需要知道的鲜为人知的Angular功能

以下是angular的一些有趣的功能，它们可以帮助你进行搜索引擎优化，提高应用程序的性能，并改善代码的可读性。

1.标题标签：这些标签显示在SERP（搜索引擎结果页）上，作为你的搜索文本的可点击和可触摸的标题。它们对可用性、搜索引擎优化和社交平台的帖子分享非常重要。

为此，你必须从@angular/platform-browser包中导入Title并将其注入构造函数中。有了这个，你也可以动态地设置文本。

示例:

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

2.元标签：我们知道，元标签对网站的索引很重要，使其在互联网上很容易被发现。你可以通过使用addTag方法添加这些标签。

为此首先，你必须从@angular/platform-browser包中导入meta属性，并将其注入构造函数中。有了这个，你就可以添加、更新、删除元标签属性。

示例:

import { Meta, Title } from '@angular/platform-browser';
 
constructor(meta: Meta) {
  meta.addTag({ name: 'description',
    content: 'sample content of meta service' });
  const authorName = meta.getTag('name=author');
  console.log(authorName.content);
  meta.updateTag({
    name: 'twitter:description', content: sample description'
  });
  meta.removeTag('name="author"');
}

输出：这将呈现为以下内容。

<meta name="twitter:title" content="Your Website Title" />

这些也都是Twitter的社交元标签。

3.模板插值： Angular还提供了覆盖插值括号的能力。我们知道默认情况下，模板插值器在我们的模板中是{{}的。它被用来在组件中显示字段（属性）。

示例:

@Component({
  interpolation: ["((", "))"]
})
 
export class AppComponent { }
  
// Here we override this { } to ().
<hello name="{{ name }}"></hello>

输出：这将呈现为以下内容。

<hello name="(( name ))"></hello>

4.定位服务：通过它，你可以从当前浏览器窗口的地址栏中获得链接。它的使用很简单，因为你只需要从@angular/common包中导入Location并将其注入构造函数中。

示例:

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

5.JS的文档属性：如果你想使用文档方法，那么你首先需要使用inject装饰器在构造函数中注入它。最好不要直接操作DOM元素。如果你直接这样做，它可能会引入XSS的机会。

示例:

import { DOCUMENT } from '@angular/common';
import { Component, Inject, VERSION } from '@angular/core';
 
constructor(@Inject(DOCUMENT) _doc: Document) {
  console.log(_doc)
}
 
renderCanvasElement() {
  this._doc.getElementById("canvas")
}

6.Attribute decorator 它基本上是用来提高应用程序的性能。我们知道Input emitter会在每个变化检测中运行，这影响了性能。所以如果你想传递一些数据或字符串，你可以使用一个属性装饰器。它只检查一次属性。

示例:

import { Component, Attribute, Input } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<hello type="some string type"></hello>`,
})
 
export class AppComponent { }
 
@Component({
  selector: 'hello',
  template: `<h1>Hello</h1> Type: "{{myVar}}"`,
  styles: [`h1 { font-family: Lato; }`]
})
 
export class HelloComponent {
  constructor(@Attribute('type') public myVar: string) {
    console.log('Attributre =', myVar);
  }
}

7.App Initializer token:当我们需要在加载我们的应用程序之前做一些初始化，如添加配置、加载缓存、管理设置或做一些检查时，它就会被使用。

示例:

import { APP_INITIALIZER } from '@angular/core';
 
function runSettingsOnInit() {
  // ...
}
 
@NgModule({
  providers: [
    { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
  ]
})

8.App Bootstrap Listener：它使我们能够监听一个组件正在被引导。在应用模块中的NgModule装饰器的提供者中添加这个。

示例:

import { APP_BOOTSTRAP_LISTENER } from '@angular/core';
@NgModule({
 {
  provide: APP_BOOTSTRAP_LISTENER, multi: true,
  useExisting: runOnBootstrap 
 }
 // ...
})