简体   繁体   English

使用Angular2的通用UI模板

[英]Generic UI template using Angular2

Can you please guide me to generate generic UI template using Angular2? 您能指导我使用Angular2生成通用UI模板吗? Here is my requirement.I would like to create generic UI template for the Login and Logout functionality.At this moment I have put same code base each and every page.Which is horrible.Please guide me to refactor this in a better way? 这是我的要求。我想为LoginLogout功能创建通用的UI模板。此刻,我在每个页面上都放置了相同的代码库。哪个太可怕了,请指导我以更好的方式重构它?

This is one of such component or page. 这是此类组件或页面之一。

event-schedule.html event-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>

event-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;
        });

}

I don't know if you are aware but ionic team has a starter project with many things(login, menu, map, etc.) already included. 我不知道您是否知道,但是离子团队已经有了一个入门项目,其中已经包含了很多东西(登录,菜单,地图等)。 Maybe that can help you. 也许可以帮到您。 Here is the link to the repository 这是仓库的链接

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM