Angular 2显示加载消息

时间:2016-05-08 14:29:45

标签: javascript angularjs angular

我是Angular 2中的初学者,我有一个方案,在指令中有一个指令,内部指令被加载10次。有没有办法在外部指令中显示加载消息,直到所有内部DOM内容都被加载?通过调用填充值的服务来填充docs值。现在我有以下代码..

外部组件模板:

@Component ({
  selector: 'app',
  directives: [Component1, Component2],
  template: `
        <div id="parent" class="parentDiv">
            <div id="scrolling">
                <div [hidden]="isLoading">Loading... </div>
                <div id="docs" *ngFor="#doc of docs">
                        <inner-doc *ngFor="#doc of doc.getDoc()" [doc]="doc"></inner-doc>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
  `

内部组件模板:

@Component ({
  selector: 'inner-doc',
  inputs: ['doc', 'body'],
  template: `
        <div>
            <div class="Title"><div class="titleText" [innerHtml]="getTitle()"></div></div>
            <div class="Body"><div class="bodyText" [innerHtml]="getBody()"></div></div>
</div>
`

在内部指令加载后,使用ngAfterViewChecked使用Loading切换 ngAfterViewChecked(){ this.isLoading=true; this.cdr.detectChanges(); } constructor (cdr: ChangeDetectorRef) { this.isLoading=false; this.cdr=cdr; } 消息时,在外部组件中使用以下代码不能正常工作...

"@@@Some Text###","@@@More Text###","@@@Even more Text###","@@@Even Even More Text###"

任何有关工作示例的帮助都会很棒:)

0 个答案:

没有答案