Pridanie stránky do Ionic 응용 프로그램

4261 단어 ionic
V so si vytvoril základnú kostru Ionic (ver.5) 응용 프로그램. Teraz si k nej pridám niekoľko nových stránok.

V nasledujúcom postupe si vytvorím dve stránky "Login"a "Register", ktoré budem neskôr využívať v tomto projekte.
Chcem aby tieto stránky (resp.súbory týchto stránok obsahujúce kód) boli v podadresári "../pages/auth/".
V adresári, kde mám vytvorenú túto Ionic aplikáciu spustiť príkaz:

ionic generate page pages/auth/login


resp.príkaz:

ionic generate page pages/auth/register



Týmto sa vytvorí v Ionic projekt definovaný podadresár "../pages/auth/"a v ňom predpripravená štruktúra súborov stránky:



Každá takto vytvorená stránka pozostáva z týchto súborov:
  • *-routing.module.ts
  • *.module.ts
  • *.page.html(간단한 레이아웃이 아님)
  • *.page.scss (obsahuje prípadne CSS charakteristiky stránky)
  • *.page.spec.ts
  • *.page.ts(간단한 논리 코드 작성)
    Vytvorením stránky zároveň je táto routovaná a nastavená v kóde tohto Ionic projektu, takže ak mám spustený devovací 서버:

  • ionic serve
    

    viem si zobraziť v prehliadači túto stránku cez príslušnú URL:

    http://localhost:8101/login
    


    čo mi zobrazí túto (zatiaľ prázdnu) stránku:



    Pridanie navigácie na stránky



    Na hlavnú stránku pridám tlačítko [로그인] cez ktoré sa dostanem na vytvorenú stránku "로그인":


    tj.v는 다음과 같이 "home.page.html"을 추가합니다.

    ...
      <div id="container">
        <strong>Ready to create an app?</strong>
        <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
    
        <div class="button-container">
          <ion-button (click)="goToLoginPage()">Login</ion-button>
        </div>
      </div>
    
    </ion-content>
    


    a v súbore kódu stránky "home.page.ts":

    import { Component } from '@angular/core';
    import {NavController} from '@ionic/angular';
    
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
    
      constructor(
        private navCtrl: NavController
      ) {}
    
      goToLoginPage() {
        this.navCtrl.navigateForward('login');
      }
    }
    
    


    Cez tlačítko [로그인] sa teraz dostanem na stránku "로그인":


    kde zase pridám do časti "header"tlačítko na návrat. V súbore "login.page.html"kód 추가:

    <ion-header>
      <ion-toolbar>
        <ion-title>login</ion-title>
        <ion-buttons slot="start">
          <ion-back-button defaultHref="home"></ion-back-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    
    <ion-content>
    
    </ion-content>
    


    ...

    좋은 웹페이지 즐겨찾기