2017-08-30 42 views
0

我正在嘗試將註銷功能綁定到正在動態填充的菜單項,當有人單擊註銷時,它會註銷用戶。我已經嘗試了下面的代碼,但似乎沒有工作。以角度綁定註銷方法

這裏是我的component.ts文件

usermenu: Object[] = [ { 
    icon: 'tune', 
    route: '/dashboard/settings', 
    title: 'Account settings' 
    }, { 
    icon: 'exit_to_app', 
    route: '', 
    title: 'Sign out', 
    method: 'logout()' 
    }, 
]; 

logout(){ 
    //my code 
} 

template.html

<md-nav-list> 
    <a *ngFor="let item of usermenu" [routerLink]="item.route" md-list-item (click)="item.method" ><md-icon>{{item.icon}}</md-icon>{{item.title}}</a> 
    </md-nav-list> 

例如,當我在帳戶設置點擊重定向到設定的評論,這是在這種情況下,簡單。註銷它不會是一個組件,而是我創建的方法logout()。我正在尋找方法,我可以將它綁定到路徑上,點擊它會將用戶登出。

+0

試圖確保我明白:您想要將註銷方法綁定到您的''標籤,對吧? – Gab

+0

是的,但是如您手動將使用ng(點擊)=「註銷()」使用ngFor從圖像中看到的數據動態顯示,它會影響設置數據。 –

+0

您可以手動設置logout()方法。我沒有看到任何理由,爲什麼你不能 – Gab

回答

0

到這裏看看:

http://plnkr.co/edit/UWLgn5B6ADLc26mgHWDb?p=info

我修改:

usermenu: Object[] = [ { 
    icon: 'tune', 
    route: '/dashboard/settings', 
    title: 'Account settings', 
method:()=>{} 
    }, { 
    icon: 'exit_to_app', 
    route: '', 
    title: 'Sign out', 
    method: this.logout 
    }, 
]; 

而且在模板:

<a *ngFor="let item of usermenu" [routerLink]="item.route" md-list-item (click)="item.method()" > 
      <md-icon>{{item.icon}}</md-icon> 
      {{item.title}} 
     </a> 

所以基本上必須添加一個默認的箭頭功能對於沒有手術的每一個環節,我認爲這確實是集市,但它的作品。

+0

按照預期工作,非常感謝幫幫我。 –