New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@RouterConfig cannot be put on any component other than the root component #6188

Closed
pdeva opened this Issue Dec 31, 2015 · 16 comments

Comments

Projects
None yet
7 participants
@pdeva
Copy link

pdeva commented Dec 31, 2015

Due to this one has to put their entire app's routing config in a single file inside a single annotation config.

This is simply not scalable for a large scale app.
Please allow putting @RouterConfig on multiple components so we can split the router config across files

@frederikschubert

This comment has been minimized.

Copy link

frederikschubert commented Dec 31, 2015

You can already do this by defining a route in your root component's RouteConfig like this (note the three dots in the Route's path):

{ path: "subroute/...", component: SubRoute, name: "SubRoute" }

And in your SubRoute component you can then define a RouteConfig like you normally do.

@thelgevold

This comment has been minimized.

Copy link
Contributor

thelgevold commented Dec 31, 2015

Yes, this is supported in Beta.

Here is a sample:

//Root
@RouteConfig([
    new Route({path: '/', component: About, name: 'About', data: {project: 'angular-2-samples'}}),
    new Route({path: '/demo/...', component: DemoPage, name: 'Demo'}),
])

//Inside DemoPage
@RouteConfig([
    new Route({ path: '/spreadsheet', component: Spreadsheet, name: 'Spreadsheet' }),
    new Route({ path: '/jquery', component: JqueryIntegration, name: 'JqueryIntegration' }),
])

More info here:
http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0

Here is also a live demo of the nested routing described above:
http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

@pdeva

This comment has been minimized.

Copy link

pdeva commented Dec 31, 2015

@thelgevold none of the links you showed have any example of how to navigate to a link programatically, for eg, on submission of a form.
Does api for that even exist? if not, that is a huge omission

@thelgevold

This comment has been minimized.

Copy link
Contributor

thelgevold commented Dec 31, 2015

Yes you can navigate directly to a route programatically..

this.router.navigate(['RouteName']);

This assumes that you have an instance of the router

class SomeComponent {

    router: Router;

    constructor(router: Router) {
        this.router = router;
    }
}
@thelgevold

This comment has been minimized.

Copy link
Contributor

thelgevold commented Dec 31, 2015

There is also router.navigateByUrl('/someUrl'))

@pdeva

This comment has been minimized.

Copy link

pdeva commented Dec 31, 2015

Why does the router require a separate path and a name for every route?
The react router 2.0 recently dropped this in favor of just having a path only.

I dont see what is the use case for having separate path and 'name' per route.

@pdeva

This comment has been minimized.

Copy link

pdeva commented Jan 1, 2016

@thelgevold ok this is very weird with subroutes. In the example you gave:

//Root
@RouteConfig([
    new Route({path: '/', component: About, name: 'About', data: {project: 'angular-2-samples'}}),
    new Route({path: '/demo/...', component: DemoPage, name: 'Demo'}),
])

//Inside DemoPage
@RouteConfig([
    new Route({ path: '/spreadsheet', component: Spreadsheet, name: 'Spreadsheet' }),
    new Route({ path: '/jquery', component: JqueryIntegration, name: 'JqueryIntegration' }),
])

I cannot have a link that points to /Demo.

I can only have a link that points to /Demo/Spreadsheet or /Demo/JqueryIntegration.

What if i just want to display the DemoPage component?

@ericmartinezr

This comment has been minimized.

Copy link
Contributor

ericmartinezr commented Jan 1, 2016

@pdeva you can't. You must use useAsDefault: true in one of the children routes, or specify one when using routerLink

@RoteConfig([
   // Now everytime you write `Demo` it will redirect you automatically to `SpreadSheet`
    new Route({ path: '/spreadsheet', component: Spreadsheet, name: 'Spreadsheet', useAsDefault: true}),
    new Route({ path: '/jquery', component: JqueryIntegration, name: 'JqueryIntegration' }),
])

// Or...
<a [routerLink]="['/Demo', 'SpreadSheet']">...
@pdeva

This comment has been minimized.

Copy link

pdeva commented Jan 1, 2016

well then what if u have say a (very common) ui master-> detail-> detail ui.
Say i select element 'x' in a list A. that pops up a detail view with another list B.
Now i select element 'y' in list B that pops up another detail view W.

According to above router rules, I can never create a route to just list B, since I have to give it the route to the very leaf component.

@pdeva

This comment has been minimized.

Copy link

pdeva commented Jan 1, 2016

seems like this a huge flaw in angular router that prevents having more than 1 level of nesting.

Linking to bug #6204 created specifically for this.

@brandonroberts

This comment has been minimized.

Copy link
Contributor

brandonroberts commented Jan 1, 2016

Here is an example of multi-level routes: http://plnkr.co/edit/v1Np3niVn3WNTZBvHQLf?p=preview

@pdeva

This comment has been minimized.

Copy link

pdeva commented Jan 1, 2016

that is a 1 level route.
/user has 2 routes on the same level: 'stats' and 'profile'
try 3 level deep nesting and navigating to just the 2nd level without rendering level 3. not possible

@thelgevold

This comment has been minimized.

Copy link
Contributor

thelgevold commented Jan 1, 2016

If you want the flexibility to render the page with or without the detail view, I think an optional route param is a perhaps a workable solution. If the param is not passed you can conditionally omit the detail view.

@wardbell

This comment has been minimized.

Copy link
Contributor

wardbell commented Jan 3, 2016

@pdeva - The Component Router does handle multi-level routes. Please read the entire router document and explore its sample which I believe covers everything you say you want to do. After that, if you can be specific about what is missing, maybe I can help.

@pdeva

This comment has been minimized.

Copy link

pdeva commented Jan 3, 2016

@wardbell sample code has same issue as i described. comments here

@vicb

This comment has been minimized.

Copy link
Contributor

vicb commented Jul 29, 2016

This router is deprecated

@vicb vicb closed this Jul 29, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment