Angular send data between modules

Ionic Framework
1

My application has some pages that need to share data between the components, and it is working, but during the test with a customer today I caught an unexpected situation. The user placed a “/” in a field, resulting in a failure.

image

image
image733×70 7.73 KB

Is there another way to sent data between the components to avoid this issue?

2

This issue can only be avoided by creating a wildcard route that could match this request.

As you may not know upfront how many mistakes the user will make, it is basically a 404 route you need to develop and then maybe use that route to infer what the best route should have been.

Check the angular docs on routing on how to do this.

At least that i what I would do.

As to create a way to share data between components in order to avoid sending data between routes, the alternative is to use a service and state management.

Then again, deeplinking can be a feature.

4

Hi @Tommertom I will change and do using service, because 404 not real for this situation… Thanks.

1 Like
5

Sharing if anyone else need. I created a BehaviorSubject to share the data.

image
image752×71 7.39 KB

service.ts

    private Op = new BehaviorSubject<any>("");
    private ID = new BehaviorSubject<any>("");
    private Name = new BehaviorSubject<any>("");

    get _Op() {
        return this.Op.asObservable();
    }
    get _ID() {
        return this.ID.asObservable();
    }
    get _Name() {
        return this.Name.asObservable();
    }

    MarkingCreateUpdate(op: any, id: any, name: any) {
        this.Op.next(op);
        this.ID.next(id);
        this.Name.next(name);        
  
        this._Router.navigate(['marking-create-update']);
    }

Component

ngOnInit() {
    this._MarkingCreateUpdateService._Op.subscribe(data => {
      this.operation = data;
    });

   this._MarkingCreateUpdateService._ID.subscribe(data => {
        this.mUpdateForm.get('_id').setValue(data);
      })

      this._MarkingCreateUpdateService._Name.subscribe(data => {
        this.mUpdateForm.get('name').setValue(data);
      })
}
1 Like
6

Cool

As convention If u want to do use underscore to mark private things, then I would do the opposite of what u do: the getters without underscore and the behaviorsubject properties with

It would make your code of the consumers a bit more readable

I prefer to add a dollar sign to the functions returning observables. As they are so special compared to others. But that is just a preference

And as a next step try (read: u must) get rid of the any keyword. Better to type everything with an interface to avoid bugs

The way u r using any right now, u might as well remove them everywhere including the <…> typings.

Now you are using typescript language to show the proverbial finger to it :crazy_face:

7

In addition to @Tommertom’s comments, you don’t need asObservable. You can simply return a Subject from a function declared to return an Observable and achieve the same effect. You are also leaking subscriptions: the way I deal with this is ngneat/until-destroy.

8

I was already wondering this looking at your epic post :grinning:

U basically let Typescript tell u should not next as consumer

Pretty clean. Nice.

1 Like
9

I’d love to take credit for it, but frankly I stole the idea from the RxJS internals. See this discussion for a PR that tried to basically add asObservable in a bunch of places and got shot down because it reduces performance without actually adding any additional safety.

1 Like
10

Well then at least accept credits for sharing here!

11

@Tommertom @rapropos Important these tips from people with experiences… Thanks guys…

I will improve my code to comply with the standards :slight_smile: