Anglar/Ionic+Storybook에서 NavController를 사용한 화면 마이그레이션
일단 화면 전환이 가능한 상태로 들어갑니다.
이 보도의 샘플 삭제가 끝난 후부터 시작합니다.
먼저
ionic g page hello
에서 목적지를 이동하는 화면을 제작하여 홈과 헬로를 통해 왔다 갔다 이동할 수 있다.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)
},
];
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 {}
<ion-header>
<ion-toolbar>
<ion-title>home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button (click)="toHello()">home</ion-button>
</ion-content>
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 페이지의 경우 >의 문장과navigateForward
는 navigateBack
만 다르기 때문에 생략합니다.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({});
점은useHash:true
때문에 필요<base>
의 대체 제품{ provide: APP_BASE_HREF, useValue: "/" },
이 필요합니다template
에서 app-home
대신 ion-router-outlet
그러니까상호작용을 확인해야 할 때 참고하세요.
Reference
이 문제에 관하여(Anglar/Ionic+Storybook에서 NavController를 사용한 화면 마이그레이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/nagashima/articles/7fbc262cd4ce59텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)