Angular查遗补漏

1.<div *ngIf="test">testdsdgdsg</div>这样,就可以通过控制test的值为true来显示div元素。test为false来隐藏div的。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。