My page from folder.page.html takes over others
Hello everyone,
I’ve been stuck on this issue for a while. I have my folder.page.html page taking over the others. I did several tests mainly on the landscapes.page.html page before taking care of the others. I access the path (http://localhost:8100/folder/paysages) well, however the html page does not appear and remains on that of folder.page.html, here are different codes so that you can help me ?
Thanks in advance !
You are the best… ^^
app.component.ts
import { Component } from '@angular/core';
import { PaysagesPageModule } from './folder/paysages/paysages.module';
import { GaleriePage } from './folder/galerie/galerie.page';
import { CombatPage } from './folder/combat/combat.page';
import { PnjPage } from './folder/pnj/pnj.page';
import { PresentationPage } from './folder/presentation/presentation.page';
import { BandeherosPage } from './folder/bandeheros/bandeheros.page';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
public appPages = [
{ title: '', url: '/folder', img: 'assets/icons/guidehorizontal.png' },
{ title: '', url: '/folder/presentation', img: 'assets/icons/presentation.png' },
{ title: '', url: '/folder/paysages/', img: 'assets/icons/paysage.png' },
{ title: '', url: '/folder/combat', img: 'assets/icons/combat.png' },
{ title: '', url: '/folder/bandeheros', img: 'assets/icons/bandeheros.png' },
{ title: '', url: '/folder/pnj', img: 'assets/icons/pnj.png' },
{ title: '', url: '/folder/galerie', img: 'assets/icons/galerie.png' },
];
constructor() {}
}
app-routing.module.ts :
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { PaysagesPage } from './folder/paysages/paysages.page';
import { PaysagesPageModule } from './folder/paysages/paysages.module';
const routes: Routes = [
{ path: 'folder/:id', loadChildren: () => import('./folder/folder.module').then( m => m.FolderPageModule)},
{ path: 'paysages/:id', loadChildren: () => import('./folder/paysages/paysages.module').then(m => m.PaysagesPageModule) },
{ path: 'combat', loadChildren: () => import('./folder/combat/combat.module').then( m => m.CombatPageModule) },
{ path: 'pnj', loadChildren: () => import('./folder/pnj/pnj.module').then( m => m.PnjPageModule) },
{ path: 'presentation', loadChildren: () => import('./folder/presentation/presentation.module').then( m => m.PresentationPageModule) },
{ path: 'bandeheros', loadChildren: () => import('./folder/bandeheros/bandeheros.module').then( m => m.BandeherosPageModule) },
{ path: 'galerie', loadChildren: () => import('./folder/galerie/galerie.module').then( m => m.GaleriePageModule) }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules } ) ],
exports: [RouterModule]
})
export class AppRoutingModule {}
folder.page.html :
<ion-content [fullscreen]="true">
<ion-header collapse="">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button>{{ folderId }}</ion-menu-button>
<ion-title size="large"></ion-title>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-label>
<object type="text/html" data="https://www.g-u-i-d-e.fr/Presentation.html" width="100%" height="90%"></object>
</ion-label>
<ion-footer collapse="">
<ion-toolbar>
<ion-buttons>
<ion-menu-button>{{ folderId }}</ion-menu-button>
<ion-title size="large"></ion-title>
</ion-buttons>
</ion-toolbar>
</ion-footer>
</ion-content>
folder.page.ts :
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-folder',
templateUrl: './folder.page.html',
styleUrls: ['./folder.page.scss'],
})
export class FolderPage implements OnInit {
folderId!: string;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.folderId = this.activatedRoute.snapshot.paramMap.get('id') ?? '';
}
}
paysages.page.html :
<ion-content [fullscreen]="true">
<ion-header collapse="">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
<ion-title size="large"></ion-title>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-label>
<object type="text/html" data="https://www.g-u-i-d-e.fr/Paysages.html" width="100%" height="90%"></object>
</ion-label>
<ion-footer collapse="">
<ion-toolbar>
<ion-buttons>
<ion-menu-button></ion-menu-button>
<ion-title size="large"></ion-title>
</ion-buttons>
</ion-toolbar>
</ion-footer>
</ion-content>
paysages.page.ts :
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-paysages',
templateUrl: './paysages.page.html',
styleUrls: ['./paysages.page.scss'],
})
export class PaysagesPage implements OnInit {
paysagesId!: string;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.paysagesId = this.activatedRoute.snapshot.paramMap.get('id') ?? '';
}
}