更改頁面視圖在角度上用按鈕

我正在關注此鏈接（https://coursetro.com/posts/code/29/Working-with-Angular-2-Material）在我的網站上使用Angular Material創建頁眉，該頁面提供md-tab-group內的即時可用按鈕。更改頁面視圖在角度上用按鈕

例如，我的頭組件的HTML是這樣的：

<md-tab-group> 
    <md-tab label="1"> 
     <app-1></app-1> 
    </md-tab> 
    <md-tab label="2"> 
     <app-2></app-2> 
    </md-tab> 
</md-tab-group>

現在我可以在同一個URL第1頁和第2頁之間切換。

問題是，除了那種在具有相同URL的頁面之間導航的方式外，我想在兩個頁面的主體中添加一個具有相同功能的按鈕。

由於這種特殊性，我無法使用<a href>或<a routerLink>，因爲它需要更改URL。

因此，我努力添加一個按鈕，它與我在頁眉中單擊md-tab-group單詞時的效果完全相同。

如果有人知道如何進行，請提前致謝！

來源

2017-09-05 Ricardo Lamberti

由於您使用的是選項卡，因此您可以使用md-tab-group提供的selectedIndex屬性。將一個click事件添加到正文中的按鈕，將選項卡索引傳遞給設置selectedIndex的活動選項卡的函數。

下面是一個例子：

HTML：

<md-tab-group [selectedIndex]="tabIndex"> 
    <md-tab *ngFor="let tab of tabs; let i=index"> 
    <ng-template md-tab-label> 
     {{ tab.label }} 
    </ng-template> 
    <h1>{{ tab.body }}</h1> 
    <div *ngFor="let x of [1, 2, 3, 4, 5]"> 
     <button *ngIf="x != i+1" md-raised-button color="warn" (click)="selectedTab(x)"> 
     <span>Go To Tab {{x}}</span> 
     </button> 
    </div> 
    </md-tab> 
</md-tab-group>

TS：

tabIndex: number = 2; 

    tabs = [ 
    { label: 'Tab 1', body: 'Tab 1 Body' }, 
    { label: 'Tab 2', body: 'Tab 2 Body' }, 
    { label: 'Tab 3', body: 'Tab 3 Body' }, 
    { label: 'Tab 4', body: 'Tab 4 Body' }, 
    { label: 'Tab 5', body: 'Tab 5 Body' } 
    ]; 

    selectedTab(index){ 
    this.tabIndex = index - 1; 
    }

Plunker demo

來源

2017-09-06 23:31:58 Nehal

更改頁面視圖在角度上用按鈕

回答

相關問題