10 ميزات زاويّة مفيدة فاتتك

1. العنوان

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

2. ميتا

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

3. الاستيفاء نمط تجاوز

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

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

4. الموقع

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. الوثيقة

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

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}
}

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

6. ديكور @ Attribute

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

7. HttpInterceptor

• المصادقة
• التخزين المؤقت
• خلفية وهمية
• تحويل URL
• تخريب الرأس

@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

function runSettingsOnInit() {
   ...
}

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

9. مستمع التمهيد

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

10. NgPlural

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

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

// if 1 component
1 component removed

// if 5 components
5 components removed