如何避免子组件在移动视图和普通视图使用一个 html 时被调用两次

Question

我的第一个 Angular2 应用程序(使用 Bootstrap(时遇到了一些问题。它多次调用组件。我认为因为子组件(

父网页文件：

 <div class="hidden-xs hidden-sm">
<b>{{studievoortgangStudent?.StudentNaam}}</b>
<div *ngFor="let studievoortgang of studievoortgangStudent?.Studievoortgang">
    <b>{{studievoortgang.CROHONaam}}</b>
    <table class="table table-responsive" *ngFor="let fase of studievoortgang.Fasen">
        <thead>
            <tr>
                <th>{{fase.NaamFase}}</th>
                <th></th>
                <th>{{fase.AantalTeBehalenEC}}</th>
                <th>{{fase.AantalVirtueelTotaalEC}}</th>
                <th>{{fase.AantalVastTeStellenEC}}</th>
                <th>{{fase.AantalWerkelijkTotaalEC}}</th>
            </tr>
            <tr [ngSwitch]="userinfo?.taalid=='2'">
                <th></th>
                <th *ngSwitchCase="true">Result</th>
                <th *ngSwitchDefault>Resultaat</th>
                <th *ngSwitchCase="true">EC value</th>
                <th *ngSwitchDefault>EC waarde</th>
                <th *ngSwitchCase="true">EC virtual</th>
                <th *ngSwitchDefault>EC virtueel</th>
                <th *ngSwitchCase="true">EC to be determined</th>
                <th *ngSwitchDefault>EC vast te stellen</th>
                <th *ngSwitchCase="true">EC determined</th>
                <th *ngSwitchDefault>EC vastgesteld</th>
            </tr>
        </thead>
        <tbody *ngFor="let eindresultaat of fase.Eindresultaten; ">
            <tr data-toggle="tooltip" title="{{eindresultaat.OpmerkingEindresultaat}}" [ngStyle]="{'color':eindresultaat.KleurEindresultaat}">
                <td>
                    <button (click)="show[eindresultaat.Cursus] = !show[eindresultaat.Cursus]" class="btn btn-primary" type="button" title="Toon toetsen">
                        <span *ngIf="!show[eindresultaat.Cursus]" class="glyphicon glyphicon-menu-hamburger"></span>
                        <span *ngIf="show[eindresultaat.Cursus]" class="glyphicon glyphicon-arrow-up"></span>
                    </button>
                    {{eindresultaat.Cursus}}
                </td>
                <td>{{eindresultaat.Eindresultaat}}</td>
                <td>{{eindresultaat.CursusEC}}</td>
                <td>{{eindresultaat.EindresultaatVirtueelEC}}</td>
                <td>{{eindresultaat.EindresultaatVastTeStellenEC}}</td>
                <td>{{eindresultaat.EindresultaatVastgesteldeEC}}</td>
            </tr>
            <tr *ngIf="show[eindresultaat.Cursus]">
                <td colspan="6">
                    <studievoortgang-detail-component [toetsmatrijs]="eindresultaat.Toetsmatrijs">Loading...</studievoortgang-detail-component>
                </td>
            </tr>
        </tbody>
    </table>
</div>
 </div>
 <div class="hidden-md hidden-lg">
<b>{{studievoortgangStudent?.StudentNaam}}</b>
<div *ngFor="let studievoortgang of studievoortgangStudent?.Studievoortgang">
    <b>{{studievoortgang.CROHONaam}}</b>
    <table class="table table-responsive" *ngFor="let fase of studievoortgang.Fasen">
        <thead>
            <tr [ngSwitch]="userinfo?.taalid=='2'">
                <th *ngSwitchCase="true">{{fase.NaamFase}}</th>
                <th *ngSwitchDefault>{{fase.NaamFase}}</th>
                <th *ngSwitchCase="true">Result</th>
                <th *ngSwitchDefault>Resultaat</th>
            </tr>
        </thead>
        <tbody *ngFor="let eindresultaat of fase.Eindresultaten">
            <tr data-toggle="tooltip" title="{{eindresultaat.OpmerkingEindresultaat}}" [ngStyle]="{'color':eindresultaat.KleurEindresultaat}">
                <td>
                    <button (click)="show[eindresultaat.Cursus] = !show[eindresultaat.Cursus]" class="btn btn-primary" type="button" title="Toon toetsen">
                        <span *ngIf="!show[eindresultaat.Cursus]" class="glyphicon glyphicon-menu-hamburger"></span>
                        <span *ngIf="show[eindresultaat.Cursus]" class="glyphicon glyphicon-arrow-up"></span>
                    </button>
                    {{eindresultaat.Cursus}}
                </td>
            </tr>
            <tr *ngIf="show[eindresultaat.Cursus]">
                <td colspan="2">
                    <table class="table table-responsive">
                        <tr [ngSwitch]="userinfo?.taalid=='2'">
                            <td *ngSwitchCase="true">
                                <div><b>EC value: </b>{{eindresultaat.CursusEC}}</div>
                                <div><b>EC determined: </b>{{eindresultaat.EindresultaatVastgesteldeEC}}</div>
                                <div><b>EC virtual: </b>{{eindresultaat.EindresultaatVirtueelEC}}</div>
                                <div><b>EC to be determined: </b>{{eindresultaat.EindresultaatVastTeStellenEC}}</div>
                            </td>
                            <td *ngSwitchDefault>
                                <div><b>EC waarde: </b>{{eindresultaat.CursusEC}}</div>
                                <div><b>EC vastgesteld: </b>{{eindresultaat.EindresultaatVastgesteldeEC}}</div>
                                <div><b>EC virtueel: </b>{{eindresultaat.EindresultaatVirtueelEC}}</div>
                                <div><b>EC vast te stellen: </b>{{eindresultaat.EindresultaatVastTeStellenEC}}</div>
                            </td>
                        <tr [ngSwitch]="userinfo?.taalid=='2'">
                            <th *ngSwitchCase="true">Tests</th>
                            <th *ngSwitchDefault>Toetsen</th>
                        </tr>
                        <tr>
                            <studievoortgang-detail-component [toetsmatrijs]="eindresultaat.Toetsmatrijs">Loading...</studievoortgang-detail-component>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

在此示例中，子组件被调用两次，并执行该组件中的所有服务两次。关于如何解决此问题的任何想法，因为我需要为移动设备/选项卡和桌面提供不同的布局。(那是因为一个div = Hidden-xs Hidden-sm，另一个是hidden-md hidden-lg(

Answer 1

您遇到的问题是每个组件都在 dom 中，并且可以从 angular 获得生命周期钩子的完整处理，只有一个组件是基于引导类隐藏的。

解决此问题的方法是在每个子组件选择器上添加另一个*ngIf，或者向两个*ngIf="show[eindresultaat.Cursus]实例添加另一个条件，以确保在任何时间点只有一个子组件处于活动状态。

关于使用 *ngIf dom 隐藏和删除元素之间区别的角度文档可以在这里找到：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngif