ionic4 -- angular 跳转页面

说明：由于官方文档还处于bate阶段，很多东西实际上没有讲清楚也没有完全解释，这样造成困扰，先从最基本的跳转页面来讲解吧。

1、引入route并新建页面：

ionic4 与前辈们最大的不同就是通过angular引入了route，这样每次跳转的时候只需要直接跳转对应的路由地址就可以了，给了路由器上的解耦，也解决了原来的RXjs与Events的子页面反复跳转重复添加监听问题【挖坑，具体操作等后面进一步深入研究】。通过翻阅源码，我们看到：

routeload.png

源码阶段直接使用rxjs监听load跳转分配路由，通过导入父路由或者根路由自带的注解和路由本身来完成类加载。ionic4在这里直接使用的是angular的源码。

新建页面：
通过在cmd上输入 ionic g 我们进入一串选项：

选择新建项目.png

然后选择page：

选择page.png

输入新建route的名称即可，我输入的是detail，作为测试跳转的页面。

2、Button直接点击跳转页面：

分析源码：

Button源码.png

发现button实际上是继承 StencliComponets.IonButton ，点击进入：

IonButton源码.png

我们找到了 'href' 属性这上面有明确的提示，为了强调，我全部再拷贝一份：

 interface IonButton {
      /**
       * The type of button. Possible values are: `"button"`, `"bar-button"`.
       */
      'buttonType': string;
      /**
       * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
       */
      'color': Color;
      /**
       * If true, the user cannot interact with the button. Defaults to `false`.
       */
      'disabled': boolean;
      /**
       * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
       */
      'expand': 'full' | 'block';
      /**
       * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
       */
      'fill': 'clear' | 'outline' | 'solid' | 'default';
      /**
       * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
       */
      'href': string;
      /**
       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
       */
      'mode': Mode;
      /**
       * When using a router, it specifies the transition direction when navigating to another page using `href`.
       */
      'routerDirection': RouterDirection;
      /**
       * The button shape. Possible values are: `"round"`.
       */
      'shape': 'round';
      /**
       * The button size. Possible values are: `"small"`, `"default"`, `"large"`.
       */
      'size': 'small' | 'default' | 'large';
      /**
       * If true, activates a button with a heavier font weight.
       */
      'strong': boolean;
      /**
       * The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
       */
      'type': 'submit' | 'reset' | 'button';
    }

也就是在代码里面如此写：

 <ion-button block href="/detail">进入页面</ion-button>

那么我们就可以在点击此button过后即可跳转到刚才建立的detail页面去了

3、自定义跳转

怀旧时期的ionic 是 navcontroller.push(component) 进行跳转指定页面，那么我们新版本如何跳转呢？
首先看看官方文档：

官方文档.png

官网提示用NavController这个类来跳转页面，然而当我翻阅源码：

NavController源码.png
根本没有 push方法，不过我这里有另外的发现：

    /**
    @params:
        @url: 路由地址
        @animated: 是否页面跳转动画
        @extras: 传递页面参数
    */
    // 进入一个页面
    goForward(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras): Promise<boolean>;
    // 返回一个页面
    goBack(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras): Promise<boolean>;
    // 进入根页面
    goRoot(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras): Promise<boolean>;

使用这三个方法，可以直接进入我们想跳转进入的页面，于是我们进入页面：

  //////////////////////////////home.page.html/////////////////////////////////////////
 <ion-button block (click)="onClick()">进入页面</ion-button>


  ////////////////////////////home.page.ts//////////////////////////////
 constructor(public nav:NavController){}

 onClick(){
    this.nav.goForward("/detail")
  }

这样就可以进入到detail页面了，非常简单，带参数的话，只用填充params就可以了，源代码还没注释，这里我把注释加上了，方便查看。