ionic4中点击跳转路由_在Ionic 4中使用角度路由

ionic4中点击跳转路由

The Router module is one of the most important in the Angular library. Paired with Ionic 4, you can be unstoppable. Here’s the rundown:

路由器模块是Angular库中最重要的模块之一。 与Ionic 4搭配使用，您将势不可挡。 以下是摘要：

背景 (Background)

One of Ionic 4’s key features is its capability to use Angular routing. The Angular router implements a path/component lookup. In other words, Angular routing works like URLs on a web browser. You can reference an Ionic page by calling /your-page-name.

Ionic 4的主要功能之一是其使用Angular路由的功能。 Angular路由器实现路径/组件查找。 换句话说，角路由的功能类似于Web浏览器上的URL。 您可以通过调用/your-page-name来引用Ionic页面。

简单路由 (Simple Routing)

When an app loads, the Angular router begins by reading the URL being loaded. In the following snippet, we see the router searching for “, which is our index route (think: alligator.io as opposed to alligator.io/ionic ). For this route, ”, we load the HomeComponent.

加载应用程序时，Angular路由器首先读取要加载的URL。 在以下代码段中，我们看到路由器搜索“” ，这是我们的索引路由(请考虑： alligator.io而不是alligator.io/ionic )。 对于此路径“” ，我们加载HomeComponent 。

You could continue down the line and call ‘alligator’, which would load the AlligatorComponent.

您可以继续执行并调用“ alligator” ，这将加载AlligatorComponent 。

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
  ...
  RouterModule.forRoot([
    { path: '', component: HomeComponent },
    { path: 'alligator', component: AlligatorComponent },
  ])
  ],
})

重定向路线 (Redirecting Routes)

We can employ router redirects to load different paths on the initial load.

我们可以使用路由器重定向在初始加载时加载不同的路径。

[
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'chomp', component: ChompComponent }
];

Upon our initial load, we look for our index route. When we load that, we are redirected to the 'login’ route.

初始加载后，我们将寻找索引路由。 加载时，我们将重定向到“登录”路由。

The key that follows pathMatch tells our router how to look up our new path. In our case the key full tells the router to compare the full path.

pathMatch后面的键告诉我们的路由器如何查找新路径。 在本例中，密钥为full告诉路由器比较完整路径。

This means if we had something like:

这意味着如果我们有类似的事情：

{ path: '/route1/route2', redirectTo: 'alligator', pathMatch: 'full' },
{ path: 'alligator', component: AlligatorComponent },

If we load /route1/route2, we’ll redirect to 'alligator’. But if we try to load /route1/route2/grip, the router will not redirect us to 'alligator’ because the paths do not match completely.

如果加载/ route1 / route2 ，我们将重定向到'alligator' 。 但是，如果我们尝试加载/ route1 / route2 / grip ，则路由器将不会将我们重定向到“ alligator”，因为路径不完全匹配。

We can also use the key prefix:

我们还可以使用键前缀 ：

{ path: '/route1/route2', redirectTo: 'nest', pathMatch: 'prefix' },
{ path: 'nest', component: NestComponent },

Here, if we load either /route1/route2 or /route1/route2/bayou, we’ll redirect to 'nest’. This is because the prefixes of our paths match.

在这里，如果我们加载/ route1 / route2或/ route1 / route2 / bayou ，我们将重定向到'nest' 。 这是因为我们的路径的前缀匹配。

延迟加载 (Lazy Loading)

Currently, upon generating an Ionic app, the framework will provide you a router module that uses lazy loading. The following is an example of the app-routing.module.ts file it will generate.

当前，在生成Ionic应用程序时，该框架将为您提供使用延迟加载的路由器模块。 以下是它将生成的app-routing.module.ts文件的示例。

app-routing.module.ts

app-routing.module.ts

...
const routes: Routes = [
  { path: '', loadChildren: './alligator/alligator.module#AlligatorPageModule' },
  { path: 'eggs', loadChildren: './eggs/eggs.module#EggsPageModule' },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
...

Notice how here, all routes are stored in the constant routes, which is then called inside the familiar Router.Module.forRoot().

请注意，这里所有路由都存储在常量路由中 ，然后在熟悉的Router.Module.forRoot()内部调用它。

The loadChildren property allows us to reference a module by string instead of by component. Accordingly, a module is required for each of the components that we add to the Ionic app. Thankfully, Ionic generates all components for us with a matching module automatically. For demonstration’s sake, however, here is an example of a component module:

loadChildren属性允许我们按字符串而不是按组件引用模块。 因此，我们添加到Ionic应用程序的每个组件都需要一个模块。 值得庆幸的是，Ionic通过匹配模块自动为我们生成了所有组件。 但是，出于演示的目的，这是一个组件模块的示例：

eggs.module.ts

egg.module.ts

import { RouterModule } from '@angular/router';
import { EggsComponent } from './eggs.component';

Every time you generate a new page in Ionic, the framework will also automatically add a new router entry for you inside the router module. Say, “thank you, Ionic!” 🙏🙏

每次在Ionic中生成新页面时，框架还将在路由器模块内自动为您添加新的路由器条目。 说，“谢谢你，爱奥尼！” 🙏🙏

With this setup, we can create separate chunks for the app component, eggs component, and the alligator component.

通过此设置，我们可以为app组件，eggs组件和扬子鳄组件创建单独的块。

导航到路线 (Navigating to Routes)

Let’s say we had our routes setup like so:

假设我们的路线设置如下：

app-routing.module.ts

app-routing.module.ts

...
const routes: Routes = [
  { path: '', loadChildren: './gator/gator.module#GatorPageModule' },
  { path: 'tail', loadChildren: './tail/tail.module#TailPageModule' },
];

To navigate to the Tail page from the Gator page, set up your HTML template like so:

要从Gator页面导航到Tail页面，请按照以下步骤设置HTML模板：

gator.page.html

gator.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Gator</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button [routerLink]="['/tail']">Go to Tail</ion-button>
</ion-content>

The routerLink directive works similarly to typical hrefs, but rather than building the URL as a string, it can be built as an array, and can provide more complicated paths.

routerLink指令的工作方式与典型的href相似，但是它可以将URL构造为数组，并且可以提供更复杂的路径，而不是将URL构造为字符串。

🐊🔀 Let’s get routing!

routing让我们开始吧！

翻译自: https://www.digitalocean.com/community/tutorials/ionic-using-angular-routing-in-ionic-4

ionic4中点击跳转路由