Question

我正在Ionic创建我的网站。我创建了不同的页面 - about.html，services.html，contact.html，products.html 。

我想在about.html内拨打services.html，home.html。我该怎么做？

我的意思是在 home.html 中显示about.html下home.html日期的数据。

home.ts

<ion-header >
  <ion-navbar color="danger">
    <ion-title>
      Ionic
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <page-about></page-about>
  <page-services></page-services>
</ion-content>

Answer 1

你应该使用路线。

在home.html中包含以下内容

 <ul class="nav navbar-nav">
        <li> <a [routerLink]="['/']" [routerLinkActive]="['is-active']">Home</a></li>
        <li> <a [routerLink]="['/about']" [routerLinkActive]="['is-active']">About</a></li>
        <li> <a href="/services" [routerLinkActive]="['active']" >services</a></li>

 </ul>

并将路由器配置为

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent }  from './components/pages/home.component';
import { AboutComponent } from './components/pages/about.component';
import { ServicesComponent } from './components/pages/about.component';
const appRoutes: Routes = [
    {
        path:'',
        component:HomeComponent
    },
    {
        path:'about',
        component:AboutComponent
    },
    {
        path:'services',
        component:servicesComponent
    }
];

修改

如果需要显示不同组件的数据，只需使用组件的选择器

<app-about> <app-services>

如何使用Ionic在home.html中加载about.html？

1 个答案: