您需要了解的鲜为人知的 Angular 特征

以下是 angular 的一些有趣功能，可以帮助您进行 SEO、应用程序性能改进和提高代码可读性。

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

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

例子：

Javascript

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包中导入元属性并将其注入到构造函数中。有了这个，您可以添加、更新、删除元标记属性。

例子：

Javascript

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"');
}

输出：这将呈现如下：

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

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

例子：

Javascript

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

输出：这将呈现如下：

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

例子：

Javascript

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 的文档属性：如果要使用文档方法，首先需要使用注入装饰器将其注入到构造函数中。最好不要直接操作 DOM 元素。如果直接这样做，可能会引入 XSS 机会。

例子：

Javascript

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. 属性装饰器主要用于提高应用程序的性能。正如我们所知，输入发射器将在每个影响性能的变化检测上运行。所以如果你想传递一些数据或字符串，你可以使用属性装饰器。它检查财产一次。

例子：

Javascript

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

7. App Initialzer 令牌：当我们需要在加载应用程序之前进行一些初始化时使用它，例如添加配置、加载缓存、管理设置或进行一些签入。

例子：

Javascript

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 
 }
 // ...
})