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不会卡死的。