成功中的错误callbackId: IonicDeeplinkPlugin297951451 : TypeError: route.split不是函数

Question

我在尝试打开一个离子应用程序的特定URL ..。

打开“通用”URL的整个设置已经完成并运行得非常好，但是现在它即将打开特定的URL。

我在app.component.ts中有这样的函数：

setupDeepLinks(){
    this.deepLinks.route({
      '/event-detail/:id':EventDetailPage,
      '/search':SearchPage
    }).subscribe(match => {
      alert(JSON.stringify(match));
    },noMatch => {
      alert(JSON.stringify(noMatch));
    });
  }

关于这个的全部信息，说这是正确的方式，甚至来自离子deepLinking的官方信息.

从Chrome打开DevTools我收到了这个错误，但是我不知道该怎么做.

​

​

我和ionic6一起工作

溶液

setupDeepLinks(){
    this.deepLinks.route({
      '/:id':'/event-detail',
      '':'/search'
    }).subscribe(match => {
      console.log('Success: ', match);
      const internalPath = `/${match.$route}/${match.$args['id']}`;
      this.zone.run(()=>{
        this.router.navigateByUrl(internalPath);
      });
    },noMatch => {
      console.error('Error: ', noMatch);
    });
  }

其实这很容易，但我哪儿也没找到。

这些路线必须像这样建造：

'/:id':'/event-detail',
'':'/search'

当路由期望ID时，数组的第一部分必须如下所示：'/:id‘，数组的第二部分类似于：’/‘

数组的第二部分是它放在app-routing.module.ts上的名称。

当路由不需要任何东西时，数组的第一部分必须为空，数组的第二部分为'/search‘

我希望这能帮到别人。

Answer 1

我得到了同样的东西，但是如果你跟随DevDactic教程并在40多岁的YouTube视频上观看西蒙，你会听到他说显式页面路由在Ionic 4/5中不太有效。

他的建议是这样做：

setupDeepLinks(){
    this.deepLinks.route({
      '/event-detail/:id': 'EventDetailPage',
      '/search':SearchPage
    }).subscribe(match => {
      alert(JSON.stringify(match));
    },noMatch => {
      alert(JSON.stringify(noMatch));
    });
  }

代码中的EventDetailPage包含在引号中。我发现你指出的错误停止了，但我仍在努力取得进展，使路线“匹配”。

如果你成功了请告诉我？

谢谢。

Answer 2

我在离子4+和@MarcoRo和@Capnross的解决方案上也有同样的问题。最重要的是，我有多条有参数的路线。所以对我起作用的工作如下所示。

        this.deeplinks.route({
        // this route is intentionally made invalid but it's important 
        //to have the page i.e anyPage in this case as quoted string : "anyPage" . 
       //This is why the plugin throws route.split() not a function error  

       '/:id':"anyPage"
    
      }).subscribe((match) => {

       // route not match so nothing to do here

      }, (nomatch) => {
        /* nomatch contains the full object of the incoming url
        so I can easily extract the needed part for navigation 
        and simply use angular router to navigate to it 
        */
     
      this.router.navigateByUrl(nomatch.$link.path)

    });
  })

这样做的目的是提供一个不存在于路由中的随机对象。

就像我说的，直到离子4和5被永久修复，我希望这能节省一些时间，因为我已经花了好几个小时才能破解它。