angular ngoninit 刷新html页面_你可能从未使用过的10个有用的Angular特性

你可能从未使用过的10个有用的Angular特性

如果你是一个Angualr的开发者，我相信你可以很熟练的开发各种页面，但这10个特性你很可能还没有使用过.

有些功能当然可以使用传统的js的方式来进行，但是如果使用angular本身的特性，可以避免少去很多麻烦，比如可以使用智能提示啊(我真的老爱忘记一些方法名称了... )

Title

title 你可能觉得很简单，他是置顶网页标题的HTML元素。

你可以通过下面的方法，在组件中设置浏览器的标题。

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

当路由到不同的页面的时候，可以使用该方法设置页面标题。

Meta

Angular的程序是从Index.html 开始渲染，他的Meta的数据一般在index.html中进行设置。

Angular在@angular/platform-browser中有一个MetaServices ，允许从组件内对其进行设置。

import { Meta } from "@angular/platform-browser"@Component({    ...})export class MyComponent implements OnInit {    constructor(private meta: Meta) {}    ngOnInit() {        meta.updateTag({name: "title", content: ""})        meta.updateTag({name: "description", content: "description"})        meta.updateTag({name: "image", content: "./assets/image.jpg"})        meta.updateTag({name: "site", content: "haha site"})    }}

覆盖模版插值

在Angular中，当页面中要使用组件的属性，一般是使用插值模版{{}}来进行。

我们可以使用自己定义的符号来覆盖插值符号，例如：

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

在AppComponet中，我们通过覆盖插值默认模版将其定义为(())

@Component({    template: `        

          ((data))      

  `,   interpolation: ["((","))"]})export class AppComponent {   data: any = "dataVar"}

Location

在开发过程中，免不了要使用Location的对象，我们可以获取到例如浏览器当前的url等一些值， 通过location我们可以定位到另一个URL等等一些操作。

在组件中可以直接使用@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()    }}

Document

Document对象大家应该非常熟悉，在浏览器中他是DOM文档，并提供一些页面元素的一些相关操作。

例如，页面中有

我们可以注入Document并使用。

@Component({})export class PanelElement {    constructor(@Inject(DOCUMENT) _doc: Document) {}    renderCanvas() {        this._doc.getElementById("myPanel")    }}

@Attribute 装饰器

他相当于一个@Input，但是他和@Input不同在于他在Angular中只会被检查一次。

所以，在ngOnchange中，并不会检测到该值变化

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

HttpInterceptor

拦截器，顾名思义他可以拦截所有的http请求，可以在拦截器中执行相应代码。 例如：在我的程序中， 我使用拦截器带入全局token，这样就不需要每次呼叫api的时候，都要再次写入。同时可以用拦截器来拦截网络的异常状况，并统一处理。

他可以拦截以下内容：

• Authentication
• Caching
• Fake backend
• URL transformation
• Modifying headers

定义

@Injectable()export class MockBackendInterceptor implements HttpInterceptor {    constructor() {}    intercept(req: HttpRequest, next: HttpHandler): Observable {        ...    }}

在AppModle中

@NgModule({    ...    providers: [        {            provide: HTTP_INTERCEPTORS,            useClass: MockBackendInterceptor,            multi: true        }    ]    ...})export class AppModule {}

AppInitializer

有时候，我们希望在Angular程序启动的时候，执行一段代码，比如加载一些设置，加载缓存或执行一个嵌入操作等，那么AppInitializer就可以帮忙来做这个事情。

function runSettingsOnInit() {    ...}

在AppModle中

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

Bootstrap Listener

和AppInitializer差不多，他可以用来监听一个组件何时被启动

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

NgPlural

这个指令我也没有用过， 哈..

这边先记录到这边，之后我再来尝试看看

  1 component removed       {{components}} components removed    

// if 1 component1 component removed// if 5 components5 components removed