Good afternoon everyone
I'm trying to navigate between child components (basically like the Tour of
Heroes application) in a simple Angular 2 application, using
router.navigate function, but so far, it is making a full page refresh
(it's adding a '?' in the url, creating a full refresh).
If I use a routerLink instead of trying to use router.navigate, it works
fine - it opens the child page without performing a full refresh.
My routing configuration is like this:
app.ts
@Component({
selector: 'app',
encapsulation: ViewEncapsulation.None,
template: `
<main>
<div>
<navbar></navbar>
</div>
<router-outlet></router-outlet>
</main>
`,
styles: [
require('../assets/css/animate.css'),
require('../assets/css/main.css'),
require('../app/app.css')
],
directives:[Navbar]
})
@RouteConfig([
{ path: '/A/...', name: 'A', loader: () =>
require('es6-promise!./a/A.ts')('A') },
])
export class App {
constructor() {
}
}
a.ts
import {Component} from '@angular/core';
import {RouteConfig, Router, RouterOutlet} from
'@angular/router-deprecated';
import {C1} from './c1/c1';
import {C2} from './c2/c2';
@Component({
selector: 'a-comp',
template: `
<div class="container">
<h2>C Components</h2>
<router-outlet></router-outlet>
</div>
`,
directives: [RouterOutlet]
})
@RouteConfig([
{ path: '/c1', name: 'C1', component: C1, useAsDefault:true},
{ path: '/c2', name: 'C2', component: C2 }
])
export class A {
constructor() {
}
}
c1.ts
import { Component } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import {Router, CanDeactivate, ComponentInstruction, ROUTER_DIRECTIVES}
from '@angular/router-deprecated';
@Component({
selector:'c1-sel',
template:`
<div class="container">
<form>
<fieldset>
<div class="page-header padding-top-sm">
<span class="title-header">C1</span>
</div>
<div class="nextDiv">
<button class="btn btn-primary btn-lg nextBtn"
[routerLink]="['C2']">Next</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
`,
styles: [require('./c1.css')],
directives: [ROUTER_DIRECTIVES]
})
export class C1 implements CanDeactivate{
constructor(private _router:Router)
{
}
ngOnInit() {
console.log('C1 init');
}
routerCanDeactivate(next: ComponentInstruction, prev:
ComponentInstruction ) {
return true;
}
onNextClick() {
// this was supposed to work - it "works", but perform a full page
refresh, because adds a ? into the URL
//this._router.navigate(['C2']);
}
}
c2.ts
import { Component } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import {Router, CanDeactivate, ComponentInstruction, ROUTER_DIRECTIVES}
from '@angular/router-deprecated';
@Component({
selector:'c2-sel',
template:`
<div class="container">
<form>
<fieldset>
<div class="page-header padding-top-sm">
<span class="title-header">C2</span>
</div>
<div class="nextDiv">
<button class="btn btn-primary btn-lg backBtn"
[routerLink]="['C1']">Back</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
`,
styles: [require('./c2.css')],
directives: [ROUTER_DIRECTIVES]
})
export class C2 implements CanDeactivate{
constructor(private _router:Router)
{
}
ngOnInit() {
console.log('C2 init');
}
routerCanDeactivate(next: ComponentInstruction, prev:
ComponentInstruction ) {
return true;
}
onNextClick() {
// this was supposed to work - it "works", but perform a full page
refresh, because adds a ? into the URL
//this._router.navigate(['C1']);
}
}
I'll try to create a plunk to make it accessible.
PS - I'm using webpack based on the angular-seed with webpack
Cheers
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
