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

📅  最后修改于: 2021-05-13 19:22:51             🧑  作者: Mango

以下是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")
  }
}


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


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


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()
  }
}


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


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


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


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