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就可以了，源代码还没注释，这里我把注释加上了，方便查看。