Angular ngbootstrap 페이지로드시 탭을 프로그래밍 방식으로 선택

Question

내 Angular 2에서는 ngbootstrap에서 탐색 탭을 구현하고 있습니다. 로드 할 때 활성 탭을 변경하고 싶습니다. 이제 기본적으로 '오퍼'탭이 활성화됩니다. '선택'방법을 사용하면 '주문'탭을 활성으로 설정하고 싶습니다.

@ViewChild('tabs') 
private tabs: NgbTabset; 

with this.tabs.select ("Orders"); OnInit/AfterContentInit tabset이 아직 렌더링되지 않고 OnAfterViewInit에 오류가 발생했습니다. 확인 후 표현식이 변경되었습니다. 이전 값 : 'true'. 현재 값 : 'false' DOM 요소가 이미 렌더링되었으므로 변경할 수 없습니다.

<ngb-tabset #tabs id="detailTab"> 
<ngb-tab id="Offers" title="Offers"> 
<ng-template ngbTabContent> 
    <br /> 
    <div class="row"> 
    <table class="table" *ngIf="_offers; else nooffers"> 
     <tr> 
     <th></th> 
     <th>Offer number</th> 
     <th>When/who created</th> 
     <th>Price</th> 
     <th>#Del weeks</th> 
     </tr> 
     <tr *ngFor='let offer of _offers'> 
     <td style="padding: 10px"><button id="detail" (click)="clicked(offer)" [routerLink]="['/offers', offer.salnr]" title="Detail offers" class="glyphButton"><span class="glyphicon glyphicon-search"></span></button></td> 
     <td>{{ offer.salnr }}</td> 
     <td>{{ offer.WhenWhoCreated }}</td> 
     <td>{{ offer.price }} {{ offer.pricecurrency }}</td> 
     <td>{{ offer.delweeks }}</td> 
     </tr> 
    </table> 
    <ng-template #nooffers>No offers</ng-template> 
    </div> 
</ng-template> 
</ngb-tab> 
<ngb-tab id="Orders" title="Orders"> 
<ng-template ngbTabContent> 
    <br /> 
    <div class="row"> 
    <table class="table" *ngIf="_orders; else noorders"> 
     <tr> 
     <th></th> 
     <th>Order number</th> 
     <th>When/who created</th> 
     <th>Price</th> 
     <th>Backorder</th> 
     <th>Available</th> 
     <th>Partial delivery</th> 
     <th>Expected Del Date</th> 
     </tr> 
     <tr *ngFor='let order of _orders'> 
     <td style="padding: 10px"><button id="detail" (click)="clicked(order)" [routerLink]="['/orders', order.salnr]" title="Detail orders" class="glyphButton"><span class="glyphicon glyphicon-search"></span></button></td> 
     <td><a href='{{ _linkToOrder }}{{_clientNr}}'>{{ order.salnr }}</a></td> 
     <td>{{ order.WhenWhoCreated }}</td> 
     <td>{{ order.price }} {{ order.pricecurrency }}</td> 
     <td>{{ order.backorder }}</td> 
     <td>{{ order.isAVAIL }}</td> 
     <td>{{ order.partialdeliv }}</td> 
     <td>{{ order.expdeldate }}</td> 
     </tr> 
    </table> 
    <ng-template #noorders>No orders</ng-template> 
    </div> 
</ng-template> 

Answer 1

임이 가장 좋은 방법인지 아닌지 확실하지만 순서가 아닌 당신이 당신의 생성자에서 ChangeDetectorRef를 주입하고 ngAfterContentInit 라이프 사이클 후크에 ChangeDetectorRef.detectChanges()를 호출 할 수있는 오류를 제거하기 . 이 대답을 통합

constructor(private _cdRef: ChangeDetectorRef) {} 
 
    
 
    ngAfterViewInit() { 
 
    this._cdRef.detectChanges(); 
 
    }

솔루션 편집

문제를 해결했다. AfterViewInit은 이제 다음과 같이 보입니다.

ngAfterViewInit() 
{ 
    if (sessionStorage.getItem("activeTab")) { 
    this.tabs.select(sessionStorage.getItem("activeTab")); 
    this.ref.detectChanges(); 
    } 
}