Anglar/Ionic+Storybook에서 NavController를 사용한 화면 마이그레이션

NavController는 화면 마이그레이션 시 상호 작용을 확인하기 위해 Storybook에 사용됩니다.어떻게 하는지 몰라서 필기에 빠졌어요.

일단 화면 전환이 가능한 상태로 들어갑니다.


이 보도의 샘플 삭제가 끝난 후부터 시작합니다.
먼저
ionic g page hello
에서 목적지를 이동하는 화면을 제작하여 홈과 헬로를 통해 왔다 갔다 이동할 수 있다.
  • app-routing.module.ts
  • import { NgModule } from '@angular/core';
    import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
      {
        path: 'home',
        loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
      },
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'hello',
        loadChildren: () => import('./hello/hello.module').then( m => m.HelloPageModule)
      },
    ];
    
  • home.module.ts
  • Storybook에서 사용할 수 있습니다.
    import { NgModule } from "@angular/core";
    import { CommonModule } from "@angular/common";
    import { IonicModule } from "@ionic/angular";
    import { FormsModule } from "@angular/forms";
    import { HomePage } from "./home.page";
    
    import { HomePageRoutingModule } from "./home-routing.module";
    
    @NgModule({
      imports: [CommonModule, FormsModule, IonicModule, HomePageRoutingModule],
      declarations: [HomePage],
      exports: [HomePage],
    })
    export class HomePageModule {}
    
  • home.page.html
  • <ion-header>
      <ion-toolbar>
        <ion-title>home</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content>
      <ion-button (click)="toHello()">home</ion-button>
    </ion-content>
    
  • home.page.ts
  • import { Component, OnInit } from "@angular/core";
    import { NavController } from "@ionic/angular";
    
    @Component({
      selector: "app-hello",
      templateUrl: "./hello.page.html",
      styleUrls: ["./hello.page.scss"],
    })
    export class HelloPage implements OnInit {
      constructor(private nav: NavController) {}
    
      ngOnInit() {}
    
      public toHome(): void {
        this.nav.navigateForward("home");
      }
    }
    
    hello 페이지의 경우 >의 문장과navigateForwardnavigateBack만 다르기 때문에 생략합니다.
    ionic serve
    
    화면을 시작하면 버튼을 눌러 왔다 갔다 이동할 수 있다.

    스토리북으로 이거를...


    useFactory DI Router로 다양한 시도를 해봤고, 결론만 적으면 아래의 코드로 하면 된다.
    import { APP_BASE_HREF, CommonModule } from "@angular/common";
    import {
      DefaultUrlSerializer,
      RouterModule,
      Routes,
      UrlSerializer,
    } from "@angular/router";
    import { IonicModule } from "@ionic/angular";
    import { moduleMetadata } from "@storybook/angular";
    import { HomePageModule } from "./home.module";
    import { HomePage } from "./home.page";
    
    const routes: Routes = [
      {
        path: "home",
        loadChildren: () => import("./home.module").then((m) => m.HomePageModule),
      },
      {
        path: "",
        redirectTo: "home",
        pathMatch: "full",
      },
      {
        path: "hello",
        loadChildren: () =>
          import("../hello/hello.module").then((m) => m.HelloPageModule),
      },
    ];
    
    //#region モジュール定義
    const imports = [
      CommonModule,
      IonicModule.forRoot(),
      RouterModule.forRoot(routes, {
        useHash: true,
      }),
      HomePageModule,
    ];
    
    const providers = [{ provide: APP_BASE_HREF, useValue: "/" }];
    
    export const data = {
      imports,
      providers,
    };
    
    export default {
      title: "pages/HomePage",
      excludeStories: /.*[(data)]$/,
      decorators: [moduleMetadata(data)],
      component: HomePage,
    };
    //#endregion
    
    const Template = (args: HomePage) => ({
      component: HomePage,
      props: args,
      template: `
        <ion-app>
          <ion-router-outlet></ion-router-outlet>
        </ion-app>
      `,
    });
    
    export const 画面遷移のテスト = Template.bind({});
    
    점은
  • Storybook의 iframe 내 마이그레이션useHash:true 때문에 필요
  • index.> <base>의 대체 제품{ provide: APP_BASE_HREF, useValue: "/" },이 필요합니다
  • template에서 app-home 대신 ion-router-outlet
  • 사용
    그러니까상호작용을 확인해야 할 때 참고하세요.

    좋은 웹페이지 즐겨찾기