I want my page to dispatch an action on the ngOnInit, this action will be catch by an effect and the effect will this.router.navigate(['path']) to a new path.
I don't need any reducer here.
But I cannot manage to make it work since this.store.dispatch() will only work if I inject my store as a DI and type it as my current state like so private store: State<fromReducers.State>
My module as imported the store like so :
#NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', pathMatch: 'full', component: EvaluationContainer }
]),
StoreModule.forFeature('evaluation', {}),
EffectsModule.forFeature(Effects)
],
declarations: [EvaluationContainer]
})
export class FeatureEvaluationModule {}
How can I still dispatch the action in this situation?
Thanks!
you need to import StoreModule.forRoot() in the parent module. If it is your root module, then here. The StoreModule.forFeature('evaluation', {}) part you can skip here.
That's how I do the same: https://take.ms/ZXxOx
Related
I'm using firebase for user authentication. Except for login/signup flows there are 3 flows called email actions - these include reset password, recover email and verify email.
You can customize the URL that Firebase is calling you, but it has the be the same URL for all actions, while the actual action is passed as query param. Here's an example:
https://example.com/usermgmt?mode=resetPassword&oobCode=ABC123&apiKey=AIzaSy...&lang=fr
// ^^^ from here on starts the dynamic part
My question - how can I use Vue router to load different component based on mode query param?
I know I can create a single component that will dynamically load one of the other 3 based on the query param, but I'm looking for a cleaner way.
I tried looking for "Vue router based on query params" and only found examples how to pass query param into the component as a prop.
Also looked for examples of implementation of Firebase authentication in Vue, but all of the examples focus just on login and signup.
EDIT:
Right now I have a router with this config:
{
path: '/auth/actions',
component: () => import('pages/EmailActions.vue'),
props: (route) => {
return {
mode: route.query.mode
}
}
}
Then, inside EmailActions I have to dynamically show one of 3 components based on mode props.
This file is really redundant as it only contains routing code.
What I'd really like to do is something like this in the router config:
{
path: '/auth/actions',
children:[
{
query: {mode: 'resetPassword'},
component: () => import ('pages/ResetPassword.vue')
},
{
query: {mode: 'recoverEmail'},
component: () => import ('pages/RecoverEmail.vue')
},
{
query: {mode: 'verifyEmail'},
component: () => import ('pages/VerifyEmail.vue')
}
]
}
I've set up my routing as follows:
const pages = [
{
path: "",
component: BaseComponent,
children: [
{ path: "scan", component: ScanComponent }
]
}
];
So for example, if you go to /scan, it involves BaseComponent and ScanComponent.
The BaseComponent contains a <router-outlet></router-outlet> which renders the contents of the ScanComponent.
This all works fine, However:
In ScanComponent I have the following:
constructor(private page: Page) {
this.page.on('navigatedTo', () => console.log('navigatedTo'));
}
And this event is never called.
If I remove the line component: BaseComponent from the parent route, the event is called, but that of course breaks other things.
How can I make sure this event is always called, regardless of whether there's a parent component or not?
This is a NativeScript application where the root component contains <page-router-outlet></page-router-outlet>
Alright, I figured it out... since "page" is a nativescript concept, its events are only applied if the route is loaded into page-router-outlet, also a NativeScript concept. It only makes sense.
After searching Google for hours, why do I always figure out the answer right after posting to StackOverflow!? *sigh* I guess it's some sort of rubber duck programming.
I've got a form in angular2. If it's dirty (with unsaved changes), I want to restrict the user from navigating away.
Research shows that the canDeactivate route guard is the way to do it.
Google led me to this github file which seems to implement what I want.
import { CanDeactivate } from '#angular/router';
import { FormGroup } from '#angular/forms';
export interface FormComponent {
form: FormGroup;
}
export class PreventUnsavedChangesGuard implements CanDeactivate < FormComponent > {
canDeactivate(component: FormComponent) {
if (component.form.dirty)
return confirm('You have unsaved changes. Are you sure you want to navigate away?');
return true;
}
}
Now, I've put this service in my project, injected it in my form component, added it to my routing module as so...
const routes: Routes = [{
path: '',
loadChildren: 'app/main/main.module#MainModule',
canActivate: [AuthenticationGuard],
}, {
path: 'login',
component: LoginComponent,
canDeactivate: [PreventUnsavedChangesGuard]
}, ]
and included it in the app module's providers array.
Now, it seems to work. In case I have unsaved changes when I click the browser's back button. I get the confirmation dialog. However, when I input a new URL in the address bar, I don't get the confirmation. Also, I'm able to close the tab when I have unsaved changes.
Are these known limitations of canDeactivate, or am I doing something wrong. How do I get the behavior I want? (Confirmation dialog if the user attempts to close tab or navigate away using the address bar?)
Problem
Im loading some menu items from the Wordpress Rest API, then navigate to the page/:id with the correct id of the wordpress page. Everything works fine except of that:
Early when my page is loading I get this null call in the network section of the chrome developer. This is locally, on my server its also a 404 NOT FOUND.
Setup
Angular 2 + Typescript (Angular 2 RC2, Router 3.0.0-alpha.6)
Wordpress REST API
Code
Template
<header></header>
<router-outlet></router-outlet>
<footer></footer>
Routing
export const routes: RouterConfig = [
{ path: '/page/:id', component: PageComponent },
{ path: '/page/home', component: PageComponent, index: true }
];
Header.ts
this.myService.getNavigation()
.subscribe(
menuItems => {
this.menuItems = menuItems;
this.router.navigate(['/page', this.menuItems[0].title]);
},
error => this.errorMessage = <any>error);
Main.ts
bootstrap(AppComponent, [
...APP_ROUTER_PROVIDERS,
...HTTP_PROVIDERS,
...ROUTER_PROVIDERS,
...ENV_PROVIDERS,
{ provide: LocationStrategy, useClass: HashLocationStrategy }
])
Assumption
I guess it has something to do with my routing setup. When I comment out the <router-outlet> it does not happen, everything else works good.
Question
What is this strange call at /null and how can I avoid it?
I guess you have somewhere <img [attr.src]="var"> or similar.
Using Iron Router for Meteor, I know I can use the parameter 'only' or 'except' to match named routers when defining an onBeforeAction, like the example in the guide:
Router.onBeforeAction(myAdminHookFunction, {
only: ['admin']
});
Imagine I have a lot of views not needing this on before action, like public pages, and a lot needing it, like admin panel. Is there any way to apply this onBeforeAction to a group of routes without explicit list each one? I mean, for example, apply to all routes starting with '/admin', something like:
only: ['/admin/*']
Or maybe apply the onBeforeAction to a parent route and then define nested routes? (I can't find if Iron Route supports nested routes), something like:
Router.route('/admin/', {
name: 'admin',
onBeforeAction: function() {},
routes: [
{name: 'users', path: '/admin/users', action: function() {}},
{name: 'posts', path: '/admin/posts', action: function() {}}
]
})
I would suggest creating controllers. Create a "base" controller and extend it wherever needed.