import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/delay'; @Component({ selector: 'exe-app', template: ` <ng-template #fetching> <p>Fetching...</p> </ng-template> <p *ngIf="auth | async; else fetching; let user"> {{user.username }} </p> `, }) export class AppComponent implements OnInit { auth: Observable<{}>; ngOnInit() { this.auth = Observable .of({ username: 'semlinker', password: 'segmentfault' }) .delay(new Date(Date.now() + 2000)); } }
我有话说
使用 [hidden] 属性控制元素可见性存在的问题
<div [hidden]="!showGreeting"> Hello, there! </div>
上面的代码在通常情况下，都能正常工作。但当在对应的 DOM 元素上设置 display: flex 属性时，尽管[hidden] 对应的表达式为 true，但元素却能正常显示。对于这种特殊情况，则推荐使用 *ngIf。
直接使用 DOM API 获取页面上的元素存在的问题
@Component({ selector: 'my-comp', template: ` <input type="text" /> <div> Some other content </div> ` }) export class MyComp { constructor(el: ElementRef) { el.nativeElement.querySelector('input').focus(); } }
以上的代码直接通过 querySelector() 获取页面中的元素，通常不推荐使用这种方式。更好的方案是使用 @ViewChild 和模板变量，具体示例如下：
@Component({ selector: 'my-comp', template: ` <input #myInput type="text" /> <div> Some other content </div> ` }) export class MyComp implements AfterViewInit { @ViewChild('myInput') input: ElementRef; constructor(private renderer: Renderer) {} ngAfterViewInit() { this.renderer.invokeElementMethod( this.input.nativeElement, 'focus'); } }
另外值得注意的是，@ViewChild() 属性装饰器，还支持设置返回对象的类型，具体使用方式如下：
@ViewChild('myInput') myInput1: ElementRef; @ViewChild('myInput', {read: ViewContainerRef}) myInput2: ViewContainerRef;
若未设置 read 属性，则默认返回的是 ElementRef 对象实例。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: