ionic5 NavController 详解

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：237

`ionic5`的`NavController`类去掉了`push`方法，新的定义只保留下面的这些方法，明白这些方法的用途就足够我们写出很优雅的导航了。

- 导航前进，和早期版本的push作用一样，地址入栈。

```
    /**
     * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
     * it's equivalent to calling `this.router.navigateByUrl()`, but it's explicit about the **direction** of the transition.
     *
     * Going **forward** means that a new page is going to be pushed to the stack of the outlet (ion-router-outlet),
     * and that it will show a "forward" animation by default.
     *
     * Navigating forward can also be triggered in a declarative manner by using the `[routerDirection]` directive:
     *
     * html
     * &lt;a routerLink="/path/to/page" routerDirection="forward"&gt;Link&lt;/a&gt;
     *
     */
    navigateForward(url: string | UrlTree | any[], options?: NavigationOptions): Promise&lt;boolean&gt;;
   ```

- 导航后退，地址出栈，可以出出栈多个路由

```
    /**
     * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
     * it's equivalent to calling:
     *
     * ts
     * this.navController.setDirection('back');
     * this.router.navigateByUrl(path);
     *
     *
     * Going **back** means that all the pages in the stack until the navigated page is found will be popped,
     * and that it will show a "back" animation by default.
     *
     * Navigating back can also be triggered in a declarative manner by using the `[routerDirection]` directive:
     *
     * html
     * &lt;a routerLink="/path/to/page" routerDirection="back"&gt;Link&lt;/a&gt;
     *
     */
    navigateBack(url: string | UrlTree | any[], options?: NavigationOptions): Promise&lt;boolean&gt;;
   ```

- 导航到跟路由，所有地址出栈

```
    /**
     * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
     * it's equivalent to calling:
     *
     * ts
     * this.navController.setDirection('root');
     * this.router.navigateByUrl(path);
     *
     *
     * Going **root** means that all existing pages in the stack will be removed,
     * and the navigated page will become the single page in the stack.
     *
     * Navigating root can also be triggered in a declarative manner by using the `[routerDirection]` directive:
     *
     * html
     * &lt;a routerLink="/path/to/page" routerDirection="root"&gt;Link&lt;/a&gt;
     *
     */
    navigateRoot(url: string | UrlTree | any[], options?: NavigationOptions): Promise&lt;boolean&gt;;
   ```

- 后退，相当于`window.history.back()`

```
    /**
     * Same as [Location](https://angular.io/api/common/Location)'s back() method.
     * It will use the standard `window.history.back()` under the hood, but featuring a `back` animation
     * by default.
     */
    back(options?: AnimationOptions): void;
   ```

- 后退到上一个路由

```
    /**
     * This methods goes back in the context of Ionic's stack navigation.
     *
     * It recursively finds the top active `ion-router-outlet` and calls `pop()`.
     * This is the recommended way to go back when you are using `ion-router-outlet`.
     */
    pop(): Promise&lt;void&gt;;
   ```

- 设置导航方向

```
    /**
     * This methods specifies the direction of the next navigation performed by the Angular router.
     *
     * `setDirection()` does not trigger any transition, it just sets some flags to be consumed by `ion-router-outlet`.
     *
     * It's recommended to use `navigateForward()`, `navigateBack()` and `navigateRoot()` instead of `setDirection()`.
     */
    setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back'): void;
```

#### 源码

[源码](https://github.com/ionic-team/ionic/blob/master/angular/src/providers/nav-controller.ts)

标签： ionic5 ionic路由 NavController

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：ionic5 开发微信网页时分享失败原因总结

ionic5 NavController 详解

随便看看

留言