Question

我正在将Ionic 3项目升级到最新的Ionic 4，并且在路由方面遇到了一些麻烦。在Ionic 3中，我像这样使用setRoot：

handler: () => navCtrl.parent.parent.setRoot(HomePage, 'logout', {animate: true})

Ionic 4的最新navCtrl只有goBack，goForward和goRoot，而且我不知道如何使用父级。我在Angular中找到ActivatedRoute，但我认为这不是正确的方法。我该怎么办？

Answer 1

一般来说，引用this awesome article on this matter by Josh Morony：

在具有Angular路由的Ionic 4中，没有要定义的根页面。

由于Ionic 4依赖于Angular的路由器，因此NavController进行了更改以反映这一新现实，并且对于Angular应用程序，没有诸如“根”路由之类的东西。您只需在路线之间过渡，框架即可完成其余工作。

通常来说，方法navigateRoot，navigateBackward和navigateForward在这里仅用于指导Ionic如何处理动画。因此，您可以在Ionic 4中使用navigateRoot来完成与在Ionic 3中使用setRoot相同的操作。

我强烈建议您阅读上述文章，其中涵盖了将路线从Ionic的版本3迁移到版本4所需的很多知识。

Answer 2

要将页面设置为Ionic 4中的根页面，应使用 navigateRoot 而不是 setRoot

this.navCtrl.navigateRoot('/pageName');

Answer 3

使用@ angular / router，一种实现预期行为的方法是使用NavigationExtras here on official docs的replaceUrl和skipLocationChange 该代码将是这样的：

Sub DeleteUnusedNames()
'PURPOSE:   Delete named ranges that are not used in formulas in the active workbook

    Dim xWB As Workbook:    Set xWB = ActiveWorkbook
    Dim xWS As Worksheet
    Dim xNameCount As Long  'Count of all named ranges
    Dim xCount As Long      'Count of current range - used to track progress
    Dim xFound As Long      'Count of times a named range was used in a formula - moves on to next code when > 0
    Dim xDeletedCount As Long
    Dim xName As Name

    Application.ScreenUpdating = False
    Application.DisplayStatusBar = True
    Application.EnableEvents = False
    Application.Calculation = xlCalculationManual

    On Error Resume Next

    xNameCount = xWB.Names.count

    For Each xName In xWB.Names
        If xName.Name Like "*Print_*" Then  'Skip Print Areas and Print Titles
        Else
            xFound = 0
            xCount = xCount + 1
            Application.StatusBar = "Progress: " & xCount & " of " & xNameCount & " (" & Format(xCount / xNameCount, "0%") & ")"

            For Each xWS In xWB.Worksheets
                If xWS.Name Like "Workbook Properties" Then 'Don't search the Workbook Properties tab for Names (if this tab exists, it will not have any used names)
                Else
                    xFound = xFound + xWS.UsedRange.Find(What:=xName.Name, _
                        LookIn:=xlFormulas, _
                        LookAt:=xlPart, _
                        SearchOrder:=xlByRows, _
                        SearchDirection:=xlNext, _
                        MatchCase:=False, _
                        SearchFormat:=False).count
                    If xFound > 0 Then Exit For   'Name was found. Stop looking.
                End If
            Next xWS

            If xFound = 0 Then  'Name was not found in a formula on any of the worksheets
                xName.Delete
                xDeletedCount = xDeletedCount + 1
            End If
        End If
    Next xName

    If xMsg = "" Then
        MsgBox "No unused names were found in the workbook", , "No named ranges were deleted"
    Else
        MsgBox xDeletedCount & " names were deleted", , "Unused named ranges were deleted"
    End If

    Application.StatusBar = False

    Application.ScreenUpdating = True
    Application.EnableEvents = True
    Application.Calculation = xlCalculationAutomatic

End Sub

但是，是的，所引用的navigationRoot不像在离子3上那样在@ angular / router上存在

Answer 4

您可以不使用angular的路由器设置setRoot。该代码可在Ionic 4中使用

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) { 

}

navigateRoot：

 this.navCtrl.navigateRoot('/app/profile');

Answer 5

在带有 Angular 的 Iocin 5 中

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  ...
})
export class LoginComponent {

  constructor(private router: Router){}

  navigate(){
    this.router.navigate(['/detail'])
  }
}

带角度路由器的Ionic 4 setRoot

5 个答案: