使用Angular2的通用UI模板

您能指導我使用Angular2生成通用UI模板嗎？這裏是我的要求。我想爲Login和Logout功能創建通用的UI模板。在這一刻，我已經把每個頁面放在相同的代碼庫中。這太可怕了。請指導我以更好的方式重構這個模板？使用Angular2的通用UI模板

這是這樣的組件或頁面之一。

事件schedule.html

<ion-buttons end> 
     <button ion-button icon-only (click)="login()" *ngIf="token==null || token.length==0"><ion-icon name="log-in"></ion-icon></button> 
     <button ion-button icon-only (click)="logout()" *ngIf="token!=null && token.length>0"><ion-icon name="log-out"></ion-icon></button> 
    </ion-buttons>

事件schedule.ts

export class EventSchedulePage 
{ 
token: string = ''; 

constructor(...) { 
} 

    //to login 
     login(): void { 
     this.navCtrl.push(LoginPage); 
     } 

     //to logout 
     logout(): void { 
     this.removeToken().then((val) => { 
      this.token = val; 
     }); 

}

來源

2017-03-18 Sampath

你面臨的問題是什麼？在你的文章中詳述它 – Aravind

問題是，假設我們在應用程序上有10個頁面。那麼我必須在每個頁面或組件上放置'login'和'logout'按鈕。爲此，我必須複製相同的代碼基於每個頁面。所以我決定創建通用的UI組件，並在每個頁面中使用該組件。那麼我不需要複製相同的代碼否？希望現在很清楚？ @Aravind – Sampath

而不是這樣做，你可以在主佈局頁面本身有組件 – Aravind

我不知道你是否知道，但離子團隊與許多啓動項目已經包括了東西（登錄，菜單，地圖等）。也許這可以幫助你。這裏是鏈接到repository

來源

2017-03-18 21:01:34 Alberick0

感謝您的template.I通常使用CLI工具only.Have你在這個模板？ – Sampath

老實說，我還沒有使用它的項目，只是代碼示例。 – Alberick0

嗯..我也試試以後。感謝信息:) – Sampath

使用Angular2的通用UI模板

回答

相關問題