angular - 从外部到特定路由的深层链接angular2 app

Question

我需要创建一个深度链接，允许用户从外部点击它(比如直接通过电子邮件或浏览器)，然后它应该被重定向到 my-app.blablabla.com://path-to -路线。我已经创建了一个有效的深层链接，但它总是在我的应用程序主页中重定向用户(如 my-app.blablabla.com://)。有一种方法可以通过深层链接传递路由路径吗？提前致谢。

PS:我也尝试在 app.component.ts 中获取引荐来源网址，但它始终 = ""。

PPS:根本不考虑path-to-route。应用程序是否在主页中打开。

我正在使用 angular2 和 cordova。

这是 Cordova 配置:

<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="20405" android-versionName="2.04.05" id="my-app.blablabla.com" ios-CFBundleShortVersion="20405" ios-CFBundleVersion="2.04.05" version="20405" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Myapp</name>
    <description>
        My app
    </description>
    <author email="luca.taccagni@hotmail.it" href="http://www.myapp.it">
        Luca Taccagni
    </author>
    <content src="index.html" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="BackupWebStorage" value="local" />
    <preference name="permissions" value="none" />
    <preference name="orientation" value="portrait" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="true" />
    <preference name="android-windowSoftInputMode" value="stateVisible|adjustResize" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="14" />
    <preference name="android-installLocation" value="auto" />
    <preference name="SplashScreen" value="resources/browser/screen/Default-Portrait-736h@3x.png" />
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="SplashScreenDelay" value="3000" />
    <platform name="browser">
        <preference name="SplashScreen" value="res/browser/screen/Default-Portrait-736h@3x.png" />
        <preference name="SplashScreenDelay" value="5000" />
        <preference name="SplashScreenBackgroundColor" value="green" />
        <preference name="ShowSplashScreen" value="true" />
        <preference name="SplashScreenWidth" value="600" />
        <preference name="SplashScreenHeight" value="300" />
    </platform>
    <platform name="ios">
    </platform>
    <platform name="android">
        <icon density="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
        <icon density="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
        <icon density="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
        <splash density="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
        <splash density="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
        <splash density="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
    </platform>
    <feature name="SplashScreen">
        <param name="ios-package" value="CDVSplashScreen" />
        <param name="onload" value="true" />
    </feature>
    <universal-links>
        <host name="abc123.app.goo.gl" scheme="https" />
        <host name="myapp.firebaseapp.com" scheme="https">
            <path url="/__/auth/callback" />
        </host>
    </universal-links>
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="data:*" />
    <allow-intent href="geo:*" />
    <allow-navigation href="about:blank" />
    <allow-navigation href="https://myapps.bla.it/*" />
    <allow-navigation href="http://myapps.bla.it/*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <hook src="hooks/buildApp.js" type="before_prepare" />
        <preference name="DisallowOverscroll" value="true" />
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <engine name="android" spec="^6.2.3" />
    <plugin name="cordova-plugin-browsertab" spec="^0.2.0" />
    <plugin name="cordova-plugin-buildinfo" spec="^2.0.1" />
    <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0">
        <variable name="URL_SCHEME" value="my-app.blablabla.com" />
        <variable name="ANDROID_SCHEME" value="https" />
        <variable name="ANDROID_HOST" value="my-app.blablabla.com" />
        <variable name="ANDROID_PATHPREFIX" value="/" />
        <!-- already tried to put something here -->
    </plugin>
    <plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
    <plugin name="cordova-plugin-ios-safari" spec="git+https://github.com/morungos/cordova-plugin-ios-safari.git" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
    <plugin name="cordova-universal-links-plugin" spec="^1.2.1" />
</widget>

Answer 1

对于任何会觉得这个问题很有趣的人:

我完全改变了我的观点。使用用于通用链接的 cordova 插件(https://github.com/nordnet/cordova-universal-links-plugin)，我为从打开应用程序的外部通用链接触发的事件创建了一个监听器。有了这个，我可以阅读调用我的应用程序的链接(如引荐来源网址)，并在其中选择我使用 Angular 路由器导航的路线。

我会发布我的 cordova config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="20405" android-versionName="2.04.05" id="my.app.com" ios-CFBundleShortVersion="20405" ios-CFBundleVersion="2.04.05" version="20405" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>My app</name>
    <description>
        my app
    </description>
    <author email="luca-tax@hotmail.it" href="http://www.myapp.it">
        Luca Taccagni
    </author>
    <content src="index.html" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="BackupWebStorage" value="local" />
    <preference name="permissions" value="none" />
    <preference name="orientation" value="portrait" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="true" />
    <preference name="android-windowSoftInputMode" value="stateVisible|adjustResize" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="14" />
    <preference name="android-installLocation" value="auto" />
    <preference name="SplashScreen" value="resources/browser/screen/Default-Portrait-736h@3x.png" />
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="SplashScreenDelay" value="3000" />
    <platform name="browser">
        <preference name="SplashScreen" value="res/browser/screen/Default-Portrait-736h@3x.png" />
        <preference name="SplashScreenDelay" value="5000" />
        <preference name="SplashScreenBackgroundColor" value="green" />
        <preference name="ShowSplashScreen" value="true" />
        <preference name="SplashScreenWidth" value="600" />
        <preference name="SplashScreenHeight" value="300" />
    </platform>
    <platform name="ios">
    </platform>
    <platform name="android">
        <icon density="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
        <icon density="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
        <icon density="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
        <splash density="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
        <splash density="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
        <splash density="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
    </platform>
    <feature name="SplashScreen">
        <param name="ios-package" value="CDVSplashScreen" />
        <param name="onload" value="true" />
    </feature>
    <universal-links>
        <ios-team-id value="DST94QR2E9" />
        <host name="for.firebase.app.goo.gl" scheme="https" />
        <host name="myapp.firebaseapp.com" scheme="https">
            <path url="/__/auth/callback" />
        </host>
        <host event="universalEvent" name="myapp.site.com" scheme="https" />
    </universal-links>
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="data:*" />
    <allow-intent href="geo:*" />
    <allow-navigation href="about:blank" />
    <allow-navigation href="https://myapp.site.com/*" />
    <allow-navigation href="http://myapp.site.com/*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <hook src="hooks/buildApp.js" type="before_prepare" />
        <preference name="DisallowOverscroll" value="true" />
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <engine name="android" spec="^6.2.3" />
    <engine name="ios" spec="^4.4.0" />
    <plugin name="cordova-plugin-browsertab" spec="^0.2.0" />
    <plugin name="cordova-plugin-buildinfo" spec="^2.0.1" />
    <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0">
        <variable name="URL_SCHEME" value="my.app.com" />
        <variable name="ANDROID_SCHEME" value="https" />
        <variable name="ANDROID_HOST" value="my.app.com" />
        <variable name="ANDROID_PATHPREFIX" value="/" />
    </plugin>
    <plugin name="cordova-plugin-google-analytics" spec="^1.8.3" />
    <plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
    <plugin name="cordova-plugin-ios-safari" spec="git+https://github.com/morungos/cordova-plugin-ios-safari.git" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
    <plugin name="cordova-universal-links-plugin" spec="^1.2.1" />
</widget>

还有我的 app.component.ts

import { Component, OnInit, ViewChild, ChangeDetectorRef, AfterViewInit, Inject } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Platform } from '@angular/cdk/platform';

declare var cordova;
declare var universalLinks;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {

  subscriptionUniversalLinkMail: any;
  urlRoute: string;

  constructor(
    private router: Router,
    private platform: Platform,
    @Inject(DOCUMENT) private document: any
  ) {

    this.router.events.subscribe(e => {
      const route: any = e[1];
      this.router.navigated = true;
    });

    this.subscriptionUniversalLinkMail = universalLinks.subscribe('universalEvent', callBack.bind(this));
    function callBack(eventData) {
      this.urlRoute = eventData.url.split('myapp.site.com/')[1];
    };

  }

  async ngOnInit() {

    document.addEventListener('backbutton', backButtonHandler, false);
    function backButtonHandler() {
      console.log('native back button canceled');
    };

    document.addEventListener('deviceready', onDeviceReady, false);
    function onDeviceReady() {
      window.open = cordova.InAppBrowser.open;
    }

    document.addEventListener('pause', pauseCallback.bind(this), false);
    function pauseCallback() {
      if (this.subscriptionUniversalLinkMail) {
        this.subscriptionUniversalLinkMail.unsubscribe();
      }
    };

    document.addEventListener('resume', resumeCallback.bind(this), false);
    function resumeCallback() {
      this.subscriptionUniversalLinkMail = universalLinks.subscribe('universalEvent', callBack.bind(this));
      function callBack(eventData) {
        this.urlRoute = eventData.url.split('myapp.site.com/')[1];
        this.sendUserToRoute(this.urlRoute);
      };
    }

    // detect platform
    this.opSystem = this.platform.ANDROID ? 'android' : (this.platform.IOS ? 'ios' : null);

    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      if (typeof window !== 'undefined') {
        window.scrollTo(0, 0);
      }
    });

  }

  async ngAfterViewInit() {

    const hostName = this.opSystem ? this.opSystem : (this.document.location ? this.document.location.hostname : '');

    setTimeout(() => {
        this.sendUserToRoute(this.urlRoute);
        if (this.subscriptionUniversalLinkMail) {
          this.subscriptionUniversalLinkMail.unsubscribe();
        }
      }
    }, 5000);
  }

  sendUserToRoute(url: string) {
    if (url) {
      this.router.navigateByUrl(url);
    }
  }
}