Question

我只是具有某些角度知识的离子技术的初学者。我有选项卡模板，“活动”选项卡在页面上将具有3个选项卡按钮，如下图所示：

如图所示，当用户单击时：

about按钮，用户将被路由到about page
home按钮，用户将被路由到home page
contact按钮，用户将被路由到contact page

在标签页内。这种情况下工作正常。

现在，我还有另一个名为add-contact的页面。当用户单击add-contact页面中的contact按钮时，他必须与add-contact一起被路由到tabs-menu页面，如下所示：

在冲浪时我得到了这个 question 。在这里，它们将与clicked object ID一起路由到其他页面，并显示该对象properties。

我不想执行这样的操作，我只想路由第二页（即添加联系人），如第二幅图像所示。

自pages起，我给了 Stackblitz DEMO

Answer 1

导航到“联系人”页面的TypeScript文件。在此文件中，您需要创建一个函数，当单击“ ADD CONTACT”按钮时，会按下添加联系人页面。

确保已导入NavController：

import { NavController } from 'ionic-angular';

在导入下方，您的代码应如下所示：

export class ContactPage {

constructor(public navCtrl: NavController) {

}


addPageLink() {
this.navCtrl.push(addContactPage);
{



{

现在导航回到“联系人”页面的HTML页面：

在“添加联系人”按钮的代码中，您将需要调用刚刚创建的函数。

您的代码应与此类似：

<button ion-button (click)="addPageLink()">
ADD CONTACT
</button>

现在，单击按钮时，应将您重定向到“添加联系人”页面。

希望这对您有所帮助，请让我知道您的生活状况，当然，如果还有其他问题，请告诉我。

Answer 2

NavController是Ionic V3导航方法

有关详细信息，请参见https://ionicframework.com/docs/v3/api/components/tabs/Tab/和https://ionicframework.com/docs/v3/api/navigation/NavController/。

因此，在每个选项卡根页面中，您都可以使用

import { NavController } from 'ionic-angular';

constructor(public navCtrl: NavController) {}

在您的方法中： this.navCtrl.push(NewPage)导航到新页面。

这是经过修改的堆叠闪电战：

https://stackblitz.com/edit/ionic-oykegj

Ionic V4主要使用角度路由

请参阅：https://ionicframework.com/docs/navigation/angular

您必须声明路线，然后使用[routerLink]进行导航。一开始需要做更多的工作，但是功能却很强大。

本教程介绍了如何更新您的应用以及原因： https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/

Answer 3

module应该包含在route的标签模块中，以便导航到tabs内的另一个页面。假设您有三个标签（home，about和contact），要将新路线（add-contact）添加到标签导航，则必须将新模块添加到 tabs-routing.module.ts ：

const routes: Routes = [
{
    path: '',
    component: TabsPage,
    children: [
      { path: 'home', loadChildren: () => import(...).then(m => m.HomePageModule) },
      { path: 'about', loadChildren: () => import(...).then(m => m.AboutPageModule) },
      { path: 'contact', loadChildren: () => import(...).then(m => m.ContactPageModule) },
      ...
      // set the 'add-contact' route inside the children of tabs route
      { path: 'add-contact', loadChildren: () => import(...).then( m => m.AddContactPageModule) },
    ]
}]

“联系人”页面中的按钮现在应使用routerLink指定要导航到的路线，如下所示：

<ion-button [routerLink]="['/add-contact']" routerDirection="forward">Add</ion-button>

通过这种方式，add-contact页由标签包裹。

如何在离子的选项卡组件中进行布线

3 个答案: