1、angular2中監(jiān)聽window.resize?
可以采用@HostListener(),具體的可以去看官方API文檔。
@Directive({
selector: "[d]"
})
export class PositioningFromParent implements AfterViewInit {
private el:HTMLElement
constructor(el: ElementRef) {
this.el = el.nativeElement
}
ngAfterViewInit() {
this.updateLeft();
}
@HostListener('window:resize')
updateLeft() {
let v = this.el.parentNode.getBoundingClientRect().right
this.el.style[left] = v + "px"
}
}
2、在父級Component的styles中包含了子級component的模板樣式，子級component模板編譯時，找不到對應(yīng)的樣式。
父級component：
@Component({
selector : 'houses-page',
templateUrl : 'app/pages/houses/page/houses.page.component.html',
styleUrls : ['styles/house/list/houseList.css']
})
houseList.css部分樣式：
.house_showContent{
height: 100%;padding-bottom: 0;
.house_show{
height: 100%;
overflow: scroll;
padding-bottom: 80px;
}
}
當(dāng)component模板編譯后，查看頁面元素：父級houses-page，子級houses-list
但是審查元素發(fā)現(xiàn).housr_show并沒有在頁面上生效！
最后如果把樣式放在index.html主頁面上，而不是放在component的styleUrls屬性里，.housr_show卻是可以找到的：
3、angular2路由的傳遞及參數(shù)接收？
-
url帶
?{ path : 'home', component : CustomComponent }
html頁面：
routerLink="/home" [queryParams]="{destination : destination}"
或者在ts文件內(nèi)：
this.router.navigate(['/home'],{queryParams : {destination : keyword}});
參數(shù)接收：
constructor (private route : ActivatedRoute) {
this.keywords = this.route.snapshot.queryParams['destination'] || '';
}
- url不帶
?
路由配置加參數(shù)：
{
path : 'home/:destination',
component : CustomComponent
}
html頁面：
[routerLink]="['/home', destination ]"
或者在ts文件內(nèi)：
this.router.navigate(['home', destination]);
參數(shù)接收：
constructor (private route : ActivatedRoute) {
this.keywords = this.route.snapshot.params['destination'] || '';
}
try do it !
4、怎樣在typescript中引入第三方庫？舉個例：怎樣在typescript中引入toastr。
/// <reference path="./toaster.d.ts" />
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div (click)="displayToastr()">Display Toastr</div>
`
})
export class AppComponent {
constructor() {
toastr.options = { positionClass: 'toast-bottom-right', }
}
displayToastr() {
toastr.info('message');
}
}
上面的toaster.d.ts去這里找吧！
https://github.com/DefinitelyTyped/DefinitelyTyped
5、angularjs里面有同學(xué)使用ng-repeat時，好多會寫個指令來執(zhí)行循環(huán)結(jié)束后的事件，那在angular2里面呢？也可以這樣，直接上代碼~
先寫個isLast指令：
import { Directive, Input, Output, EventEmitter, OnInit} from "@angular/core";
@Directive({
selector : '[isLast]'
})
export class IsLastDirective implements OnInit{
@Input() isLast : boolean;
@Output() lastDone : EventEmitter<boolean> = new EventEmitter<boolean>();
ngOnInit(): void {
if (this.isLast) {
this.lastDone.emit(true);
}
}
}
那在我們使用*ngFor的時候就可以使用了：
<div *ngFor="let item of items; let last = last" [isLast]="last" (lastDone)="printMsg()">
6、在angularjs里面可以使用攔截器（interceptor），來為http請求headers統(tǒng)一處理，比如這樣：
module.factory('sessionInjector', ['SessionService', function(SessionService) {
var sessionInjector = {
request: function(config) {
if (!SessionService.isAnonymus) {
config.headers['x-session-token'] = SessionService.token;
}
return config;
}
};
return sessionInjector;
}]);
module.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('sessionInjector');
}]);
那么angular2中呢？
查詢了官方API之后，發(fā)現(xiàn)BaseRequestOptions這個是可以滿足我們的要求的，上碼：
第一步：
先創(chuàng)建個class：
import {BaseRequestOptions} from "@angular/http";
export class ArRequestOptions extends BaseRequestOptions {
private X_Auth_Token : any;
constructor() {
super();
this.X_Auth_Token = localStorage.getItem("xAuthToken");
this.headers.append('x-auth-token',this.X_Auth_Token);
}
}
第二步，在app.module.ts里面加入配置：
providers : [
{
provide : RequestOptions,
useClass : ArRequestOptions
}
]
這樣，就可以實現(xiàn)統(tǒng)一全部請求加入x-auth-token的目的。
第三期就到這里吧~下期再見！
