I have the following route hierarchy :
const appRoutes:Routes = [
{
path: 'article',
component: ArticleComponent,
children: [
{
path: '',
component: ArticleListComponent
},
{
path: ':articleId',
component: ArticleDetailComponent,
children: [
{
path: '',
component: PageListComponent
},
{
path: ':pageId',
component: PageComponent
}]
}]
},
{path: '**', component: DefaultComponent},
];
When I click the Article link , the page is navigated to :
"https://run.plnkr.co/article;listData=foo"
And then I see this :
Now , When I click at Article 2 , the page is navigated to
"https://run.plnkr.co/article;listData=foo/2;detailData=bar"
And then I see this :
Now , when I click at the Page 33 link , the page is navigated to :
"https://run.plnkr.co/article;listData=foo/2;detailData=bar/33;detailData=kro"
And then I see this:
OK
As you can see , at the innermost component ( the single page component) , I set some code to see the current params :
Page component! {{params | json}}
Which is populated in :
export class PageComponent {
constructor(private activatedRoute_:ActivatedRoute) {
activatedRoute_.params
.subscribe(params => {
this.params=params;
});
}
Question:
Currently the value of params value - is only { "pageId": "33", "detailData": "kro" } which belongs to the final route.
But how can I get the previous routes values ?
I know I can read the querystring but I find it an unconventional way .
The innermost url is :
"https://run.plnkr.co/article;listData=foo/2;detailData=bar/33;detailData=kro"
So basically I'm asking how can I extract all the parameters from prev routes.
( I mean what are the values for articleId , listData , detailsData (the first one) )?
PLNKR
You can get all parents params using snapshot. In detail component:
let node = activatedRoute_.snapshot;
while(node) {
console.log('component', node.component.name, ', params:', node.params);
node = node.parent;
}
component ArticleDetailComponent ,
params: Object {articleId: "1", detailData: "bar"}
component ArticleComponent , params: Object {listData: "foo"}
component RootComponent , params: Object {}
You should be sending the listData value along with the object.Modify this to your app/article-list.component.ts Component
<a [routerLink]="[articleId, {listData:'foo',detailData: 'bar'}]">
LIVE DEMO
You can manually send params when calling the states inside the links, but to be honest this is not the best solution.
My better suggestion is to use the resolve blocks of the states and implement resolvers in order to achieve that.
Every state will have the corresponding resolver which will resolve the params you need from the previous state.
Here the link to the documentation:
https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html
The concept is that inside the resolve of the i state, you can still access the state parameters of the i-1 state, so you can pass them to the new state.
Related
I have an array called components at the LiveEdit.vue file data. I want to add an array item which has an object inside to the components array. Everything works fine except the emitting data part. LiveEdit component is on /live url path. The child i'm emitting is NavBarEdit.vue which is on /edit/nav url path. I want to emit data form NavBarEdit to LiveEdit. I also want to change url path to go back to LiveEdit component. I somehow found a way to change routes which is this
this.$emit('addComponent', data)
this.$router.push('/live')
This is my code at LiveEdit vue file
data() {
return {
components: []
}
},
methods: {
addComponent(data) {
this.components = [...this.components, data]
}
},
This is my routes
routes: [
{
path: '/',
component: LandingPage,
},
{
path: '/live',
component: LiveEdit,
},
{
path: '/edit/nav',
component: NavBarEidt,
},
{
path: '/edit/slider',
component: SliderEdit,
}
]
How can I solve this problem? I am really in a trouble with this one. I've been dealing with this like two days. And still no luck. So, please help me out
I want to route with an Id between the pages. I do so with [routerLink]. But when I run the app I get an error: Error: Cannot find module '../friend/friend-details.module'. I suppose that I didn't type in correctly the path but I wouldn't know what I could try further. So I want to navigate to friend-details and pass on the id so it know which item it was. The friend-details folder is in the friend folder, so the path should actually work.
page.html
<ion-card *ngFor="let friend of loadedFriends">
<ion-avatar [routerLink]="['/', 'tabs', 'friend', friend.id]" slot="start">
</ion-card>
tabs.router.module.ts
const routes: Routes = [
{
path: 'tabs',
component: TabsPage, //render component that holds your tabs
children: [
{
path: 'friend',
children: [
{
path: '',
loadChildren: '../friend/friend.module#FriendPageModule'
},
{
path: ':friendId',
loadChildren: '../friend/friend-details.module#FriendDetailsPageModule' //maybe delete the same page of app.module.ts
},
]
},
EDIT:
I tried a solution in which I used a click event:
openFriendDetails() {
this.router.navigate(['friend/:id']);
}
which I take access from app-routing.module.ts
{ path: 'friend/:id', loadChildren: './friend-details/friend-details.module#FriendDetailsPageModule' },
The navigation works after this change. But somehow I can't make use of my id since the friend-details page is frozen somehow and I can't change my page anymore.
first you need to change your children to this
children: [
{
path: '',
pathMatch: 'full',
loadChildren: '../friend/friend.module#FriendPageModule'
},
{
path: ':friendId',
loadChildren: '../friend/friend-details.module#FriendDetailsPageModule' //maybe delete the same page of app.module.ts
},
]
then also you need to add path: '', component: yourcomponent in your FriendDetailsPageModule routing
check your friend-details module path and put id as second router link param. for example : [routerLink]="['/tabs/friend', friend.id]" this will generate the route /tabs/friend/:friendId and you can access by ActivatedRoute.params.friendId into your component
You mention that:
The friend-details folder is in the friend folder, so the path should actually work.
Are you being accurate with your words? If so the path should be:
../friend/friend-details/friend-details.module#FriendDetailsPageModule
I have 2 routes with vue-router, one of them receives a parameter id.
{
path: '/sale/',
name: 'other',
component: ComponentA,
},
{
path: '/sale/option/:id',
name: 'close-sale',
component: ComponentB,
},
it turns out that the redirection is done with code directly, making in ComponentA
this.$router.push({ name: 'close-sale', params: {id: this.id}})
When I do this, it redirects me to the path named close-sale, but inside the path I get the id to load some data of the following form
data(){
return {
id: this.$route.params.id
....
}
},
mounted (){
axios.get('...'+this.id). // undefinied this.id
},
But I always return undenifed for the value of id.
How could I get this id if in the url it is not shown? I hope I have understood
My routes for the application are
const router = new VueRouter({
mode:'history',
routes:[
{
path:'/home',
name:'home',
component: Home
},
{
path: '/services',
name: 'services',
component: Services
},
{
path:'/blogs',
name:'blogs',
component:Blogs
},
{
path:'/pingme',
name:'pingme',
component:Pingme
}
],
})
Now, in services route I want to navigate to the which is present in the Home component. How can I create router so as to navigate to the services div when the services link is clicked?
Let's say you want to bring in focus to a specific div in the Service component.
we will make use of query params to achive this. You add add a dedicated url as well which will do this.
This is my route:
{
path: '/services',
name: 'services',
component: Services
}
Then in the url localhost:8000/services?show=mydiv and in the mounted hook of the component do something like this:
mounted() {
// add a id to the div we want to bring in foucs
// and id and the id is paased the query params
document.getElementById(this.$route.query.show).scrollIntoView()
}
Let me know if it works for you.
Edit
Another way we can make this work is by using a watcher and a computed property.
First add a computed property for the show query param in the route.
computed: {
show() { return this.$router.query.show }
}
Then add a watcher to trigger the focus.
watch: {
show: {
immediate: true,
handler(value) {
document.getElementById(value).scrollIntoView();
}
}
That should work in all cases.
I have one problem in developing Angular project.
I tried to find the solution on how to implement the route relative redirects with
When the URL redirects, in which origin redirect has its relative the query params and the fragment.
For example, in the guide of Angular.io.
const heroesRoutes: Routes = [
{ path: 'heroes', redirectTo: '/superheroes' },
{ path: 'hero/:id', redirectTo: '/superhero/:id' },
{ path: 'superheroes', component: HeroListComponent },
{ path: 'superhero/:id', component: HeroDetailComponent }
];
in hero-detail, goback() function to navigate back to the HeroListComponent.
I added relativeTo: this.route. But it is not working.
gotoHeroes(hero: Hero) {
let heroId = hero ? hero.id : null;
// Pass along the hero id if available
// so that the HeroList component can select that hero.
// Include a junk 'foo' property for fun.
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }], {relativeTo: this.route});
}
When configuring to redirect to superheroes, I don't know how to implement this feature.
You need a relative route, so depending on where you are, this should work to go back:
this.router.navigate(['../', { id: heroId, foo: 'foo' }, {relativeTo: this.route}]);
You can use something like -
this.router.navigate(
['hero','12345'],
{
relativeTo: this.route,
queryParams: {
type: 'value',
},
}
);