CODEWITHSUNDEEP
androidangularjsnativescriptdeep-linking
mrdeleon
mrdeleon

Reputation: 645

How do I re-route my Angularjs Nativescript app in the Activities onNewIntent method (DeepLinking)

I am extending the Activity class so that I can receive a new intent's data. This is working as expected, but I am unable to figure out how to then route my application based on the data I get.

import { setActivityCallbacks, AndroidActivityCallbacks } from "ui/frame";

@JavaProxy("org.myApp.MainActivity")
class Activity extends android.app.Activity {
    private _callbacks: AndroidActivityCallbacks;

    protected onCreate(savedInstanceState: android.os.Bundle): void {
        if (!this._callbacks) {
            setActivityCallbacks(this);
        }

        this._callbacks.onCreate(this, savedInstanceState, super.onCreate);
    }

    protected onNewIntent(intent: android.content.Intent): void {
      super.onNewIntent(intent)
      if (intent.getDataString) {
        let data = intent.getDataString();

        if (data) {
          console.log('onNewIntent data ', data);
          //How do I route my Angularjs Nativescript application here based on the data I get back?
        }
      }
    }
}

Upvotes: 0

Views: 533

Answers (1)

mrdeleon
mrdeleon

Reputation: 645

My question was answer here https://github.com/ddfreiling/tns-ng-deeplink

But here is the snippet of what I was looking for.

In your activity.android.ts file create and EventEmitter that emits the intent data.

import { EventEmitter } from '@angular/core';
import { setActivityCallbacks, AndroidActivityCallbacks } from "ui/frame";

export var OnRouteToURL = new EventEmitter<string>();

@JavaProxy("org.myApp.MainActivity")
class Activity extends android.app.Activity {
    private _callbacks: AndroidActivityCallbacks;

    protected onCreate(savedInstanceState: android.os.Bundle): void {
        if (!this._callbacks) {
            setActivityCallbacks(this);
        }

        this._callbacks.onCreate(this, savedInstanceState, super.onCreate);
    }

    protected onNewIntent(intent: android.content.Intent): void {
        super.onNewIntent(intent);


        if (intent.getAction() === android.content.Intent.ACTION_VIEW){
            const dataStr = intent.getDataString();
            OnRouteToURL.next(dataStr);
        }
    }
}

And in your app.component.ts file import the OnRouteToURL eventEmitter and subscribe to it.

import { Component, OnInit, EventEmitter, NgZone } from "@angular/core";
import { Router } from '@angular/router';
import * as application from 'application';
import { isAndroid, isIOS } from 'platform';

let OnRouteToURL: EventEmitter<string>;
if (isIOS) {
    application.ios.delegate = require('./delegate').CustomAppDelegate
    OnRouteToURL = require('./delegate').OnRouteToURL;
} else if (isAndroid) {
    OnRouteToURL = require('./activity').OnRouteToURL;
}

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit {

    constructor(
        private zone: NgZone,
        private router: Router
    ) {
    }

    ngOnInit() {
        // Subscribe to routing events from both platforms
        OnRouteToURL.subscribe((url) => this.handleRouting(url));
    }

    handleRouting(url: string) {
        // Assume everything after :// is an app route
        // in production you might want to limit which routes are allowed to deep-link
        const route = url.substr(url.indexOf('://') + 3);
        console.log(`AppComponent: Navigate to route '${route}'`);

        // Do the routing in the Angular Zone, just to be sure
        this.zone.run(() => {
            this.router.navigateByUrl(route);
        });
    }
}

Upvotes: 2

Related Questions