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

以下是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.元标记：众所周知，元标记对于索引网站以使其易于在Internet上发现很重要。您可以使用addTag方法添加这些标签。

首先，您必须从@ angular / platform-browser包中导入meta属性，并将其注入到构造函数中。这样，您可以添加，更新，删除元标记属性。

例子：

Java脚本

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还提供了覆盖插值括号的功能。众所周知，默认情况下，模板内插器在模板中为{{}} 。它用于显示组件中的字段(属性)。

例子：

Java脚本

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

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

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

例子：

Java脚本

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机会。

例子：

Java脚本

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.属性装饰器基本上用于提高应用程序的性能。众所周知，输入发射器将在每次更改检测上运行，这会影响性能。因此，如果您想传递一些数据或字符串，则可以使用属性装饰器。它将检查该属性一次。

例子：

Java脚本

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令牌：当我们需要在加载应用程序之前进行一些初始化(例如添加配置，加载缓存，管理设置或进行某些签入)时，使用它。

例子：

Java脚本

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

8. App Bootstrap Listener：它使我们能够侦听组件被引导时的情况。将其添加到app模块中NgModule装饰器的提供程序中。

例子：

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