Блог

После того, как я запутался, я попытался написать простое упражнение по маршрутизации. Когда я реализую свой код с помощью, я вижу, что есть 2 кнопки, даже если у меня нет кнопок в элементах маршрутизатора. Но когда я реализую без выхода маршрутизатора, я вижу на экране соответствующую кнопку 1.

Вот мой пример;

app.component.html:

 <div>
  <button type="button" class="btn btn-outline-secondary"><a
      routerLink="./elements"
      routerLinkActive="active">Table</a></button>
</div>

<router-outlet></router-outlet>
 

app.routing-mdule.ts:

 import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { Element2Component } from './element2/element2.component';
const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      { path: 'elements', component: Element2Component },
    ]
  }
];

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

element2.component.html:

 <p>element2 works!</p>
 

В качестве более глубокого объяснения; когда я пытаюсь сделать это на моем app.component.html:

 <div>
  <button type="button" class="btn btn-outline-secondary"><a
      routerLink="./elements"
      routerLinkActive="active">Table</a></button>
</div>
 

Я вижу одну кнопку. Также, когда я применяю только router-outlet, я вижу только «elements works!», Как и ожидалось. Но когда я пытаюсь реализовать эти 2 вместе, я вижу 2 кнопки и «элементы работают!». Почему я не вижу на экране только 1 кнопку и «элементы работают!»?

Любая помощь будет оценена.

Ваша кнопка отображается дважды, потому что я полагаю, что AppComponent является вашим корневым компонентом (и всегда есть), а также у вас есть его в качестве пути по умолчанию «». Итак, ваш компонент загружается дважды!

Итак, здесь используйте другой компонент, кроме AppComponent, в вашем пути по умолчанию; не используйте его повторно 🙂