angular маршрутизация компонентов на домашнюю страницу - PullRequest
Новая
       12

angular маршрутизация компонентов на домашнюю страницу

0 голосов
/ 25 апреля 2020

Привет У меня возникли проблемы с перенаправлением на некоторые страницы в Ioni c. Я пытаюсь создать компонент заголовка, который будет иметь боковое меню, которое будет ссылаться на разные страницы. Но я также хочу иметь возможность отключить заголовок на некоторых страницах. Я могу видеть компонент заголовка на моей медиа-странице, но routerLink не работает. Вот мой код:

header-routing.module.ts 

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

import { HeaderComponent } from './header.component';

const routes: Routes = [
  {
    path: '',
    component: HeaderComponent
  },
  {
      path: 'home',
      loadChildren: '../../../pages/landing/home/home.module#HomePageModule'
  }

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class HeaderRoutingModule {}

header.component. html

<ion-header>
  <ion-toolbar class="toolbar">
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button color="danger">
        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="start">
      <ion-button routerLink="/home">Home</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

component.module.ts 

import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HeaderComponent } from './header/header.component';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    ReactiveFormsModule,
    FormsModule
  ],
  declarations: [
      HeaderComponent
  ],

  exports: [
      HeaderComponent
  ]
})
export class PageComponentsModule { }

media.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { MediaPageRoutingModule } from './media-routing.module';

import { MediaPage } from './media.page';
import { PageComponentsModule } from '../components/page-component.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    PageComponentsModule,
    MediaPageRoutingModule
  ],
  declarations: [MediaPage]
})
export class MediaPageModule {}

Заранее спасибо!

1 Ответ

2 голосов
/ 26 апреля 2020

Я использовал, я работаю вокруг этого, имел симуляцию случая, и вот как я это исправил. Возможно, это не лучшая практика, поэтому, если у кого-то с большим опытом рутирования есть что-то более проданное, я бы тоже хотел узнать.

  1. Я удалю routerLink и добавлю событие (click) <ion-button (click)="onHomeRoute()">Home</ion-button>
  2. тогда внутри контроллера я буду:

Imports 

 "import { Router } from '@angular/router';"

Конструктор 

(private router: Router)

И тогда я добавлю this.router.navigate(['/home']); внутри мое событие щелчка вот так, 

onHomeRoute(){
this.router.navigate(['/home'])
}

Я надеюсь, что это также поможет вам, и, как я уже сказал, если у кого-то есть лучшие решения, пожалуйста, прокомментируйте, что я также хотел бы знать. веселит.

...