Navigation without having reference to Router/RouterExtensions

[spocky112]

How to initiate navigation in NativeScript Angular project outside of components? Eg when I don't have a reference to a Router/RouterExtensions? The actual use case is that I would like to route the user to the correct view when they have clicked on a local notification, there is callback in app.module.ts but in this callback I have not discovered a way get a reference to the Router/RouterExtensions object which is normally used to initiate navigation.

In a browser Angular app I could force navigation by setting window.location = "/myroute";

Is something similar possible in NativeScript Angular apps?

[tsonevn]

Hi @spocky112, Can you provide more info about your case and why you are setting the local notification listener in app.module.ts? In your scenario, you can set up the listener in app.component.ts, where you can access the RouterExtensions and to navigate to the needed page. For your convenience, I am attaching a sample project. Archive.zip

[spocky112]

the use case is that I want to navigate to a specific view when user is opening app through clicking on a notification outside of the app. I'm using https://github.com/EddyVerbruggen/nativescript-local-notifications and it provides a callback to react to these events.

LocalNotifications.addOnMessageReceivedCallback(
      function (notification) {
        console.log("ID: " + notification.id);
        //here I want to navigate to a specific route

      }
  ).then(
      function() {
        console.log("Listener added");
      }
  )

I have tried adding the callback to the constructor of app.component.ts, it works when clicking on the notification when the app is open but does not work when app is closed and opened via clicking on notification. This is because when the app is reopened a new instance of AppComponent is created and the callback is called on the old instance.

[spocky112]

Thank you for the archive.zip project. I tried it and it has the same behaviour. Inside app it works but when clicking on notification outside of app it does not go to the correct route.

[tsonevn]

Hi @spocky112, Can you make the needed changes in the above-attached project, which will allow us to recreate the issue with the wrong navigation?

[spocky112]

There are no changes needed to view this behaviour. Compare the effect when: 1) tap on the notification when inside the app: navigated to /item/id 2) tap on the notification when outside the app: navigated to /items

[tsonevn]

Hi @spocky112, I tested the second scenario, and it seems that new activity will start when you tap on the notification when the app is suspended. Regarding that, you can set up android:launchMode= "singleInstance" in the AndroidManifest.xml file, which allows starting the same activity on app resume.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="__PACKAGE__"
    android:versionCode="1"
    android:versionName="1.0">

    <supports-screens
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"/>

    <uses-sdk
        android:minSdkVersion="17"
        android:targetSdkVersion="__APILEVEL__"/>

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:name="com.tns.NativeScriptApplication"
        android:allowBackup="true"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
         >

        <activity
            android:launchMode= "singleInstance"
            android:name="com.tns.NativeScriptActivity"
            android:label="@string/title_activity_kimera"
            android:configChanges="keyboardHidden|orientation|screenSize"
            android:theme="@style/LaunchScreenTheme">

            <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.tns.ErrorReportActivity"/>
    </application>
</manifest>