I have the following url structure:
http://localhost:4200/foo/:fooId/(bar:barId//baz:bazId)
And the following router config:
{
path: 'foo',
children: [
{
path: ':fooId',
component: fooComponent,
children: [
{
path: ':fooId',
component: FooComponent
},
{
path: ':barId',
component: BarComponent,
outlet: 'bar'
},
{
path: ':bazId',
component: BazComponent,
outlet: 'baz'
}
]
}
]
}
If I am at http://localhost:4200/foo/0/(bar:1//baz:2), inside the BazComponent, how can I retrieve the barId parameter from the bar outlet?
import { ActivatedRoute } from '#angular/router';
params: any[] = [];
constructor(private route:ActivatedRoute) {
this.route.parent.children.forEach(children => {
this.params.push(children.snapshot.params);
});
}
ngOnInit() {
console.log(params);
}
// This returns:
// [
// { bar: barId },
// { baz: bazId }
// ]
Use this:
import {ActivatedRoute} from '#angular/router';
constructor(private route:ActivatedRoute){}
barId:number;
ngOnInit(){
// 'bar' is the name of the route parameter
this.barId = this.route.snapshot.params['bar'];
}
Related
I am trying to setup a store using Pinia in vue3 with apollo client and composition API.
here is my store
import { defineStore } from "pinia";
import apolloClient from "../apollo.provider";
import { ALL_POSTS } from '#/constants/blog'
export const usePostsStore = defineStore("posts", {
state: () => ({
posts: []
}),
actions: {
async AllPosts() {
const { data } = await apolloClient.query({
query: ALL_POSTS,
fetchPolicy: 'no-cache'
})
console.log(data)
this.posts = data.posts.data
},
},
})
and here is the response
{
"data": {
"posts": {
"data": [
{
"id": 2
},
{
"id": 3
},
{
"id": 5
},
{
"id": 4
},
{
"id": 1
}
]
}
}
}
I get an empty array with this setup. Please help me understand how to get the posts!
http://localhost:8080/#/ this is the local host port that i opened but when i logged in it redirects to http://localhost:8080/?#/ . Then i have to logged in again to have my router go to http://localhost:8080/?#/admin
what is the significance of the question mark
I am using firebase authentication
here is my router index
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Admin from "../views/Admin.vue";
import ManageUsers from "../views/ManageUsers.vue";
import Funds from "../views/Funds.vue";
import CompleteDetails from "../views/CompleteDetails.vue";
import UserFunds from "../views/UserFunds.vue";
import ViewPost from "../views/ViewPost.vue";
import ResetPassword from "../views/ResetPassword.vue";
import Profile from "../views/Profile.vue";
import Overview from "../views/Overview.vue";
import Users from "../views/Users.vue";
import { fb } from "../firebase.js";
import AllUsers from "../views/Allusers.vue"
//User
import User from "../views/User.vue";
import MyProfile from "../views/MyProfile.vue";
import UserDashboard from "../views/Userdashboard.vue";
import Posts from "../views/Posts.vue";
import postEdit from "../views/postEdit.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/admin",
name: "admin",
component: Admin,
meta: { requiresAuth: true },
children: [
{
path: "funds/:user",
name: "funds",
component: Funds,
},
{
path: "userfunds",
name: "userfunds",
component: UserFunds,
},
{
path: "completedetails/:user",
name: "completedetails",
component: CompleteDetails,
},
{
path: "overview",
name: "overview",
component: Overview,
},
{
path: "posts",
name: "posts",
component: Posts,
},
{
path: "postEdit/:postId",
name: "postEdit",
component: postEdit,
},
{
path: "ViewPost/:postId",
name: "ViewPost",
component: ViewPost,
},
{
path: "users",
name: "users",
component: Users,
},
{
path: "allusers",
name: "allusers",
component: AllUsers,
},
{
path: "profile/:user",
name: "profile",
component: Profile,
},
{
path: "manageusers",
name: "manageusers",
component: ManageUsers,
},
],
},
{
path: "/user",
name: "user",
component: User,
meta: { requiresAuth: true, requiresType: true },
children: [
{
path: "myprofile/:user",
name: "myprofile",
component: MyProfile,
},
{
path: "posts",
name: "postsUser",
component: Posts,
},
{
path: "ViewPost/:postId",
name: "ViewPostUser",
component: ViewPost,
},
{
path: "userfunds",
name: "userfundsUser",
component: UserFunds,
},
{
path: "userDashboard",
name: "UserDashboard",
component: UserDashboard,
},
],
},
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/resetpassword",
name: "ResetPassword",
component: ResetPassword,
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = new VueRouter({
routes,
});
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some((x) => x.meta.requiresAuth);
const currentUser = fb.auth().currentUser;
if (requiresAuth && !currentUser) {
next("overview");
} else if (requiresAuth && currentUser) {
next();
} else {
next();
}
});
export default router;
I'm going (using routerLink) to a details page of an object, but instead of the ID, it appears undefined, and don't know how to do it correctly, this is my code:
Tab routing
{
path: 'book/:id',
loadChildren: '../book-detail/book-detail.module#BookDetailPageModule',
pathMatch: 'full'
}
Page A (FROM):
...
bookId = null
bookRef: AngularFirestoreDocument
constructor(
private route: ActivatedRoute,
private af: AngularFirestore,
private service: BookService
) { }
...
HTML
<ion-card [routerLink]="['/book/', id]" routerDirection="forward">
Page B (TO):
...
ngOnInit() {
this.bookId = this.route.snapshot.paramMap.get('id');
if (this.bookId) {
this.loadBook(this.bookId);
}
}
loadBook(bookId) {
this.af.collection<Book>('books')
.doc<Book>(bookId)
.valueChanges()
.subscribe(data => {
this.book = data
});
}
...
The error I'm getting is:
ERROR Error: Uncaught (in promise): FirebaseError: [code=not-found]:
No document to update:
projects/books-29320f/databases/(default)/documents/books/undefined
FirebaseError: No document to update:
projects/books-29320f/databases/(default)/documents/books/undefined
On my url on my detailspage of the book it says: http://localhost:8100/book/undefined
UPDATED 2:
Book detail module:
const routes: Routes = [
{
path: '',
component: BookDetailPage
}
];
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [BookDetailPage]
})
export class BookDetailPageModule {}
You should add :id to BookDetailPage path in BookDetailPageModule :
const routes: Routes = [
{
path: ':id',
component: BookDetailPage
}
];
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [BookDetailPage]
})
export class BookDetailPageModule {}
FINALLY RESOLVED:
I didn't know about it's just to put this code:
<ion-card [routerLink]="['book/', book.id]" routerDirection="forward">
Instead of what I did (see on my question)
Here is my router config file;
const appRoutes: Routes = [
{ path: '', redirectTo: 'giris', pathMatch: 'full' },
//Route for Ajax methods
{ path: 'Ajax/*', redirectTo: 'Ajax/*', pathMatch: 'full' },
{ path: 'giris', component: GirisComponent },
{ path: 'biyografi', component: BiyografiComponent },
{ path: 'galeri', component: GaleriComponent },
{ path: 'siirleri', component: SiirleriComponent },
{ path: '**', component: GirisComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
And here is my service codes;
#Injectable()
export class CPService {
private menuLink: string = "Ajax/Menu";
constructor(private _http: Http) {}
getMenu() {
return this._http.get(this.menuLink)
.map((response: Response) => response.json())
.catch(this._errorHandler);
}
_errorHandler(error: Response) {
console.error(error);
return Observable.throw(error || "Server Error");
}
}
And here is my Web Method;
[HttpGet]
public JsonResult Menu() {
var categories = entity.Category.Where(a => a.Active == true && a.Display == true).ToList();
foreach (var item in categories) {
item.RouteUrl = item.RouteUrl.ToLower().Replace("-", "");
}
return Json(categories, JsonRequestBehavior.AllowGet);
}
When i try to access the Web Method it just open a normal web page :( It doesn't call Menu method from AjaxController when i debug.
I'm waiting for your answers. I'm new at Angular :)
I just added the code below to the beginning of my RouteConfig.cs file
routes.MapRoute(
name: "Ajax",
url: "Ajax/{action}/{id}",
defaults: new { controller = "Ajax", action = "Menu", id = UrlParameter.Optional }
);
Then i changed my angular router config file like below (I just removed route for Ajax methods);
const appRoutes: Routes = [
{ path: '', redirectTo: 'giris', pathMatch: 'full' },
{ path: 'giris', component: GirisComponent },
{ path: 'biyografi', component: BiyografiComponent },
{ path: 'galeri', component: GaleriComponent },
{ path: 'siirleri', component: SiirleriComponent },
{ path: '**', component: GirisComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
Children routing is not working on browser refresh in angular4. Please anybody help me.
Main Routing :
{
path: 'todo',
loadChildren: 'app/todo/todo.module#TodoModule',
canActivate: [AuthGuard],
data: {
required_scope: "todo"
}
}
}
Child Routing :
import { Routes, RouterModule } from "#angular/router";
import { ModuleWithProviders } from "#angular/core";
import { TodoComponent } from "./todo.component";
import { TodoDetailsComponent } from "./todo-details/todo-details.component";
const routes: Routes = [
{
path: '',
component: TodoComponent,
children: [{
path: ':id',
component: TodoDetailsComponent
}]
}
];
export const TodoRouting: ModuleWithProviders = RouterModule.forChild(routes);