Get best of the week

您错过的10个有用的Angular功能


如果您定期在Angular中编写应用程序并且花了一百多个小时，那么您很可能知道这些功能。但是，可以肯定的是-请阅读:)

在继续介绍Angular的功能之前，值得一提的是一个非常有用的工具。Bit（Github）使在Angular组件上一起工作和共享它们变得容易。我真诚地建议它保持一致的接口，加快开发速度并减少代码中的错误数量。


示例：使用bit.dev的Angular圆形装载机


1.标题


title标签是一个HTML元素，用于定义网页的标题。标题作为结果的可单击标题显示在搜索结果页面（SERP）上。它们对于可用性，SEO和社会推广非常重要。网络。

Angular应用程序从index.html中的...标签获取标题。默认情况下，Angular中组件之间的过渡不会更改此标头。

您知道标题可以与每个组件分开设置吗？

Angular中有一个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.元


Angular应用程序元标记也来自index.html文件。并从组件设置它们，从角度的/平台浏览器。

再说一次：使用元标记在社交网络中的SEO和页面推广方面很有用。网络中，它们包含有关网页的信息，搜索引擎使用该网页来正确排名并在搜索结果中正确显示。

要使用meta标签组件，请从角度的/ platform-b​​rowser并嵌入所需的组件。

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现在可以正确显示在Twitter，Facebook等上。同时以正确易读的形式显示说明，标题和图像。
您也听说过吗？然后，这里有一些更有趣的事情。

3.覆盖图案插值


模式中的标准插补器为{{}}。如果您在{{和}}之间输入变量，则其值将显示在最终DOM中。

您是否知道可以覆盖任何字符上的标准封装分隔符？这很简单。您只需要在组件装饰器的插值属性中指定新值。

@Component({
   interpolation: ["((","))"]
})
export class AppComponent {}

AppComponent模板中使用的插值已更改为（（）），并且{{}}不再有效。

@Component({
   template: `
       <div>
           ((data))
       </div>
   `,
   interpolation: ["((","))"]
})
export class AppComponent {
   data: any = "dataVar"
}

在浏览器中，您将看到将显示字符串“ dataVar”来代替（（data））。

4.位置


我们可以使用位置服务获取在浏览器中打开的页面的当前URL。根据所使用的LocationStrategy，位置将通过URL中的路径（/ example / page /）或英镑后面的部分（＃test / page /）存储。

使用“位置”，我们可以转到URL，在故事中前进，返回，更改当前URL或替换故事中的顶部项。

CommonModule的位置服务将在这里提供帮助。

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.文件


有时，您需要获取文档模型才能直接从Angular应用程序执行DOM操作。

文档仅用于此目的。DOCUMENT是表示主要渲染上下文的DI令牌。在浏览器中，这是一个DOM文档。无论运行时如何，它都提供DOM操作。

注意：如果“应用程序”上下文和“渲染”上下文不匹配（例如，在Web Worker中启动应用程序时），则文档在“应用程序上下文”中可能不可用。

假设我们有某种HTML元素：

<canvas id="canvas"></canvas>


要获取画布HTMLElement，请实现DOCUMENT：

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


警告：小心使用DOCUMENT！与DOM交互直接具有危险性，并增加了XSS的风险。

6.装饰器@Attribute


基本上，在Angular应用程序中，它们使用Component，Module和Directive装饰器。

但是，还有一个属性装饰器，它使您可以传递静态字符串而不会造成不必要的性能开销，从而绕过更改检查。

属性装饰器值仅检查一次。用作装饰器输入项：

@Component({
   ...
})
export class BlogComponent {
   constructor(@Attribute("type") private type: string ) {}
}


7. HttpInterceptor


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装饰器提供程序部分：

@NgModule({
   providers: [
       { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
   ]
})

9.引导监听器


与AppInitialzer相似，Angular具有允许您跟踪组件加载的功能。这是APP_BOOTSTRAP_LISTENER。

对于每个可下载的组件，将调用此令牌返回的所有回调。

在许多情况下，您可以使用此功能来跟踪组件的启动。例如，路由器模块基于路由导航使用它来销毁和创建组件。

要使用APP_BOOTSTRAP_LISTENER，您需要使用回调函数将其添加到AppModule的provider部分中：

@NgModule({
   {
       provide: APP_BOOTSTRAP_LISTENER, multi: true,
       useExisting: runOnBootstrap
   }
   ...
})
export class AppModule {}


10. NgPlural


多元化是程序员的头疼问题。取决于单数/复数形式的使用，对单词形式进行语法调整的任务不断出现。一些网站为此仅使用结尾。例如：

1 component(s) removed
3 component(s) removed

也就是说，读者本人必须理解隐含的数字：)

Angular建议使用NgPlural指令以更加文明的方式解决此问题。

NgPlural基于数字值添加或删除DOM子分支。对于多元化，这就是您所需要的。

要使用此伪指令，必须将[ngPlural]属性设置为元素容器作为开关表达式。具有[ngPluralCase]属性的内部元素将根据指定条件显示：

<p [ngPlural]="components">
   <ng-template ngPluralCase="=1">1 component removed</ng-template>   
   <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>   
</p>


现在您可以丢弃“（s）”。NgPlural指令将根据含义帮助导出正确的单词形式。总：

// if 1 component
1 component removed

// if 5 components
5 components removed


Source: https://habr.com/ru/post/undefined/

More articles:


All Articles