RouterLink перестает работать после добавления объявлений

Question

Я разрабатываю ранний образец приложения Ionic на основе Angular. Он должен перемещаться между различными страницами и отображать различный контент в соответствии с контекстом.

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

Целевой страницей является Ионная страница, называемая «компонентом».

После того, как я добавил компонент «BottombarComponent» на целевую страницу, объект, связанный с routerLink, перестал перенаправлять на страницу. Однако вы все равно можете получить к нему доступ через его путь.

Я перепробовал все, что только мог себе представить. Я все еще новичок в Angular.

Это модуль для страницы компонента.

//[...]
import { ComponentPage } from './component.page';
import { BottombarComponent } from '../dependency/bottombar/bottombar.component';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: ComponentPage
      }
    ])
  ],
  declarations: [
    ComponentPage,
    BottombarComponent // this line is what throws the issue
  ]
})

Это HTML-объект, ссылающийся на страницу "component":

<ion-card [routerLink]="['/component']">
    <ion-card-header>
      <ion-card-title>Guia de Conceitos</ion-card-title>
    </ion-card-header>
    <ion-item>
      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
      <ion-label>Índice de todos os conceitos abrangidos</ion-label>
      <ion-button fill="outline" slot="end">ABRIR</ion-button>
    </ion-item>

    <ion-card-content>
      Descrição...
    </ion-card-content>
  </ion-card>

Может ли кто-нибудь помочь мне понять, что не так?

Ссылка на проект Github: https://github.com/misaelvergara/Syntaxe

Answer 1

Вы декларировали BottombarComponent и TopbarComponent в двух разных модулях.Таким образом, это вызывает ошибку.

Примечание: Вы должны объявить компонент в одном модуле.

Если вы предполагаете повторно использовать компонент вразные модули, вы должны обернуть их в один модуль и экспортировать их в export array.

здесь. В вашем случае вы должны создать dependency module, как показано ниже

@NgModule({
  declarations: [TopbarComponent, BottombarComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [
    BottombarComponent,
  ]
})
export class DependencyModule { }

после этого, какие компоненты вы повторно используете в модуле, просто импортируйте dependency module.Вот и все, это решит ваши проблемы