angular


Angular2 nested-child-routing not working


Angular2 nested-child-routing not working. My page's structure which includes nested child route is as following:
-Home
-Signup ->
User1 ->
Result ->
1.Todo1_Query -> Todo1_QueryID
2.Todo2_Query -> Todo2_QueryID
3.Todo3_Query -> Todo3_QueryID
When I click on Todo1_Query (which is the end result), it should be able to be displayed on the same place (cluster) but it shows an errormessage that says it can not find any data.
404: page missing
Has anyone any idea how it could work? Thanks.
app.component.ts
app.component.ts
export const ROUTES: Routes = [
{ path: '', component: HomeComponent },
{ path: 'home', component: HomeComponent },
{ path: 'signup', component: SignupComponent, resolve: { db: DBReady } },
{ path: 'user', component: UserComponent, canActivate: [DBLoggedIn] },
{
path: 'user',
component: UserComponent, canActivate: [DBLoggedIn],
children: [
{
path: "",
component: UserComponent
},
{
path: 'Result',
component: ResultComponent,
children: [
{
path: 'todo1',
component: Todo1Component,
children: [{
path: ':id',
component: Todo1SelectionComponent
}]
},
{
path: 'todo2',
component: Todo2Component,
children: [{
path: ':id',
component: Todo2SelectionComponent
}]
},
{
path: 'todo3',
component: Todo3Component,
children: [{
path: ':id',
component: Todo3SelectionComponent
}]
}
]
}
]
},
{ path: '**', component: NoContentComponent },
];
todo1.component.ts
import { Todo1SelectionComponent } from './todo1-selection';
#Component({
selector: 'todo1-app',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<h5>{{title}}</h5>
<div *ngFor="let item of Todo1" class="panel panel-info" [routerLink]="['/todo1', item.key]">
{{ item.name }} </div>
`
})
export class Todo1Component implements OnInit, OnChanges {
public Todo1: Array <model.Todo>;
public title = 'Todo1';
#Input() Todo1: Array <model.Todo>;
#ViewChild(Todo1SelectionComponent) todo1selection: Todo1SelectionComponent;
constructor(private router: Router, private route: ActivatedRoute) {
}
ngDoCheck() { }
ngOnChanges() { }
}
ngOnInit() {
console.log("Todo1Component");
}
}
ngAfterViewInit() {
console.log("ngAfter");
}
}
ngOnDestroy() { }
}
result.component.ts
#Component({
-> html url
select checkbox
button function submit()
->
-> children in panels
-> 1.todo1
<todo-app1 [todo1]=todo1></todo-app1>
<router-outlet></router-outlet>
->2.todo2
<todo-app2 [todo2]=todo2></todo-app2>
< router-outlet></router-outlet>
->3.todo3
<todo-app3 [todo3]=todo3></todo-app3>
<router-outlet></router-outlet>
-> end panel
->
})
export class resultComponent implements DoCheck, OnChanges, OnInit {
public todo1: Array <model.Todo>;
public todo2: Array <model.Todo>;
public todo3: Array <model.Todo>;
#ViewChild(Todo1Component) todo1Component: Todo1Component;
#ViewChild(Todo2Component) Todo2Component: Todo2Component;
#ViewChild(Todo3Component) Todo3Component: Todo3Component;
submit(){
this.todo1=data1;
this.todo2=data2;
this.todo3=data3;
} }
See the below lines in your code
{ path: 'user', component: UserComponent, canActivate: [DBLoggedIn] },
{
path: 'user',
component: UserComponent, canActivate: [DBLoggedIn],
children: [
user route is repeated twice. Thats the issue

Related Links

Angular4- on change select box returns wrong value
AOT Compilation error in angular library
Angular, Ionic2 Configure #ViewChild every time it is initialized
Angular ViewContainerRef and its ViewRefs - dynamic versus declarative?
Setting one parameter to a certain value upon entering a different parameter - NgSwitch?
Angular 2 page transition while leaving page
Adding the Multiselect feature to an Angular4 dropdown?
Add lines of code depending on folder structure - Precompiler?
Angular2 Rxjs Observable catch method compilation error
Partial file loader for translations [on hold]
How to pass data from modal to component?
Angular code diference between source code and debugger code
Angular2 cannot use the values of a subscribe in another subscribe (observable)
Angular 2 Passing parameters to the template through #Input() [closed]
All declarations of 'size' , 'prototype' must have identical modifiers
Accessing the Device Camera without getUserMedia [closed]

Categories

HOME
machine-learning
objective-c
highcharts
powershell-v4.0
asynchronous
accounting
autodesk-forge
entities
logistic-regression
google-home
glusterfs
ejb
directshow
crystal-reports-xi
shoutem
outlook-redemption
zk
biopython
smt
pentaho-spoon
licode
derivative
couchbase-view
image-comparison
mitmproxy
stackdriver
swtbot
gnome
touch
fork
entity-relationship
powerpoint-vba
sandbox
git-clone
bing-api
byte
post-build-event
gmail-contextual-gadgets
regex-negation
gsutil
easymock
nsdate
asn.1
umbraco-mvc
powerdesigner
mlt
protactor
google-console-developer
reduce
gitversion
jquery-ui-tabs
nosuchelementexception
angularjs-service
ember-cli-mirage
slug
powershell-tools
stdio
type-systems
ldflags
nested-function
smf
eclipse-indigo
kendo-datepicker
kmip
page-load-time
numerical-analysis
nibble
snap-lang
f#-interactive
ng-template
togglz
stompjs
ti-nspire
pull-request
nstablecolumn
fswatch
tap
puphpet
lastaccesstime
google-text-to-speech
worksite-sdk
magnetometer
jquery-dropkick
review
vin
searchqueryset
opencv-features2d
kindle-fire
tracker
nxt-python
pre-commit-hook
n-tier
datacontext
wxgrid
google-playground
bitmapimage
offlineapps
mapstraction
django-1.2
problem-steps-recorder
real-time-data
stackmob
websitespark
apprequests
windmill
array-formulas
set-theory
iphone-4
nexus-7
in-app
rails-models
widechar
visual-programming
habari
table-driven
pdc2008
o3d

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile