0

I have a "game" where I want load a different HTML each time the same component loads.

My structure is something like

pages/game/
├── Game1-lines
│   ├── 1.html
│   ├── game.module.ts
│   └── game.ts
└── Game2-jumping
    ├── 1.html
    ├── 2.html
    ├── 3.html
    ├── game.module.ts
    └── game.ts

As you can see, Game2 has 3 different HTMLs that I can use ( which I want to rotate between ). and Game1 only have 1 kind of template.

My component are loaded "lazy" and the code is something like

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';

let templateIndex = 1;

@IonicPage({segment: "Game2-jumping"})
@Component({
  selector: 'game-page',
  templateUrl: '1.html'
})
export class GameJumpPage {
    templateIndex: any;

    constructor(public navCtrl: NavController) {
        this.templateIndex = templateIndex;
        templateIndex++;        
    }


}

I have variable called templateIndex which every time I load the component - is increasing ( so I always know where I left off and provide a different HTML )

Problem

The issue is with the templateUrl, when I use templateUrl: '1.html' - it loads 1.html just fine. But when I write templateUrl: templateIndex + '.html' - it gives me error "NetworkError: 404 Not Found - http://localhost:8100/1.html"

I really don't understand what's the difference ?! between hard-coded 1.html and variable(eq=1).html ?! ...

Any thoughts ?

Ricky Levi
  • 7,298
  • 1
  • 57
  • 65
  • I don't know the reason why it is happening in this way. However, Why not keep 1,2,3 .. hml files in one and have a switch inside. If the HTML files contain too much, then you may extract components. – heroin Feb 02 '18 at 14:20
  • each one is a game on its own, so they are kind of big ... – Ricky Levi Feb 02 '18 at 14:21
  • Have you considered this option: https://angular.io/guide/dynamic-component-loader ? – heroin Feb 02 '18 at 14:40
  • Solution can be found in https://stackoverflow.com/questions/31692416/dynamic-template-urls-in-angular-2 – heroin Feb 02 '18 at 14:51
  • Couldn't tell which one of the examples isn't obsolete :D ... – Ricky Levi Feb 02 '18 at 15:16
  • trying to change the change like `templateUrl: templateIndex + '.html'` is a bad idea try to do it in component i don't think what you are trying is a good idea it may crash in future. @RickyLevi – Mohan Gopi Feb 02 '18 at 17:18
  • I'm open for new ideas, any other approach ? because I think it's a bad design for me to create for each `1.html` a `1.ts` – Ricky Levi Feb 03 '18 at 12:15

0 Answers0