1.<div *ngIf="test">testdsdgdsg</div>這樣,就可以通過控制test的值為true來顯示div元素。test為false來隱藏div的。
- @ViewChild('greet')修飾器的使用方法:
@Component({
selector: 'my-app',
template:<h1>Welcome to Angular World</h1> <div #greet>Hello {{ name }}</div>//**1.這里有一個變量,名為greet
,
})
export class AppComponent {
name: string = 'Semlinker';
@ViewChild('greet')//**2.使用名為greet的變量
greetDiv: ElementRef;//3.重新命名,并且類型化
ngAfterViewInit() {
this.greetDiv.nativeElement.style.backgroundColor = 'red';//4.可以直接使用此變量
}
}
不用使用:
let greetDiv= this.elementRef.nativeElement.querySelector('div');來查找了。
3.在Angular中已經對一些ng事件如ngClick,ngBlur,ngCopy,ngCut,ngDblclick…中加入了一個變量叫做$event.
因此,因此阻止事件繼續往下繼續傳遞,可以使用:<button (click) = "myNumber = myNumber + 1;$event.stopPropagation();">adas</button>來進行阻止。
4.在代碼里設置timeout比較簡單,在html文件中如何設置,還得查找:
setTimeout(() => {
this.n = this.n + 10;
}, 1000);
5.網頁可見區域寬度和高度
寬度:document.body.clientWidth
高度:document.body.clientHeight
網頁正文寬度和高度
寬度:document.body.scrollWidth
高度:document.body.scrollHeight
6.angular2 在組件模板中可以循環數組集合等對象,語法非常簡單,如:
<ng-container *ngFor="let item of model.list">
<div class="sermons-post">
{{item.name}}
</div>
</ng-container>
ng2 結構指令不能直接嵌套使用,可使用<ng-container>標簽來包裹指令
示例如下:
<ng-container *ngFor="let item of lists">
<a href="# ">
<img src="{{item.picurl}} " alt=" " style="width:79px;height: 70px; ">
</a>
</ng-container>
DOM 輸出:
<a href="# ">
<img src="{{item.picurl}} " alt=" " style="width:79px;height: 70px; ">
</a>
注:ng-container 渲染所包含的模板內容,不包含自身。
7.IE中最好不要在app組件中使用數組綁定,如果數據量很大會卡死。chrome和fixfoe不會卡死的。