ChocolateChip Navigation and Angular2

[Erhard Karger]

Hello everybody,

at the moment I work on an integration of cc and angular2 

the navigation work which means that screen are filled with the angularness templates.

The Problem I have in navigation back to the menu or list of the navigation.

The button backTo routes correct to home in angular2 (url also ok). But I can go back the navigation in cc

I do not get the "meinmenu" again where a can selectt the articles. Has anybody an idea hoot get the mainmenu.

The code down ist the context to understand it :

It the app.ts  and the main.html where the menu is.

Thanks in advance

Erhard

app.ts

import { bootstrap } from "angular2/platform/browser";
import {RouteConfig, Router,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS,HashLocationStrategy, LocationStrategy} from 'angular2/router';
import {Inject,  provide, Component, AfterViewInit } from "angular2/core";
import {LoginComponent}   from './components/basic/login/loginComponent.js';
import {HomeComponent}   from './components/basic/homeComponent.js';






@Component({
    directives:[ROUTER_DIRECTIVES],
    selector: 'sc-main',
    templateUrl: 'main.html'
})


@RouteConfig([


    { // Crisis Center child route
        path: '/Login',
        name: 'Login',
        component: LoginComponent,
        data: {title: 'login'}


    },
    {path: '/home',
     name: 'Home',
     component: HomeComponent,
     data: {title: 'Scampinet.com'}
    }
    // {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
    // {path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]}
])






class Main implements AfterViewInit {
    constructor(@Inject(Router) router: Router){
        this.router = router;
    }


    private gotoFunction(router,route){
        return function(){
            console.log("ljljljl");
            console.log(router);            
            router.navigate(route);
        };
    };



    //same as Document Ready Function of Angular//
    ngAfterViewInit() {
        $('button.backTo').on('singletap', this.gotoFunction(this.router,["Home",{}]));
    };
}


bootstrap(Main,  [  ROUTER_PROVIDERS, ROUTER_DIRECTIVES ,  provide(LocationStrategy, {useClass: HashLocationStrategy}) ]).catch((err: any) => console.err(err));

main.html :

the data-goto is always content. Where the content is replace by angular via router-outlet

 

 <nav class="current">
    <h1>Navigation</h1>
  </nav>
  <article id="home" class="current">
    <section>
      <ul class='list' role='list'>
        <li class='comp' data-goto="content">
          <div>
              <a [routerLink]="['/Login']">
            <h3>login</h3>
            </a>
          </div>
          <aside>
            <span class='nav'></span>
          </aside>
        </li>
        <li class='comp' data-goto="content">
          <div>
            <h3>Places</h3>
          </div>
          <aside>
            <span class='nav'></span>
          </aside>
        </li>
        <li class='comp' data-goto="content">
          <div>
            <h3>Things</h3>
          </div>
          <aside>
            <span class='nav'></span>
          </aside>
        </li>
        <li class='comp' data-goto="content">
          <div>
            <h3>Animals</h3>
          </div>
          <aside>
            <span class='nav'></span>
          </aside>
        </li>
        <li class='comp' data-goto="content">
          <div>
            <h3>Food</h3>
          </div>
          <aside>
            <span class='nav'></span>
          </aside>
        </li>
      </ul>
    </section>
  </article>
  <nav class='next'>
    <button class='backTo'>Navigation</button>
    <h1>content--->>> change it !!</h1>
  </nav>
  <article id="content" class='next'>
    <section>
     <router-outlet>outcome</router-outlet>  
  </section>
  </article>

[Erhard Karger]

Solved it myself with $UIGoBackToArticle("#home"); in the constructor of the main class.

Thanks "myself"