Прежде чем кто-то пометит этот вопрос как дубликат, я попробовал ответить на следующие вопросы:

Angular 5 router.navigate не работает

router.navigate не работает (Angular6, ленивая загрузка)

Router Navigate не перенаправляет на другую страницу

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

Я создал новое приложение, в котором пытаюсь проложить маршрут к Home.Component из App.Component с помощью router.navigate(). Ниже приведены файлы для справки:

App Component.html

<p>App component works</p>
<button (click)="onClick()">Click Home</button>

< Сильный > App.component.ts

import { Router, ActivatedRoute } from '@angular/router';
export class AppComponent {
  constructor(private router:Router){}
  onClick(){
    console.log("Button clicked!!");
    this.router.navigate(['home']);
  }
}

app-routing.module.ts

const routes: Routes = [
  { path:'', component: AppComponent, pathMatch:'full'},
  {path:'home', component:HomeComponent},
];

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

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Я не понимаю, почему home.component.html не загружается при нажатии кнопки Click Home.

Кроме того, я попытался создать другой компонент Second.component и попытался загрузить его с помощью Home.component при нажатии кнопки (кнопка внутри Home.component).

Компоненты не загружаются лениво (они находятся в одном модуле). Всякий раз, когда я нажимаю кнопку, URL-адрес изменяется. Так почему же связанный компонент не загружается? Я пропустил какую-то часть конфигурации? Вот демонстрация

0
Samarth Saxena 14 Июн 2020 в 10:46

1 ответ

Лучший ответ

Компонент приложения, который вы видите при запуске приложения, присутствует здесь, потому что это загружаемый компонент, а не потому, что он находится на активированном маршруте. Вам понадобится элемент o <router-outlet> для рендеринга компонента, соответствующего текущему пути.

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

Я предполагаю, что вы пытаетесь добавить меню, которое будет отображаться на всех страницах, и пару страниц, к которым вы можете перейти. В этом случае вы можете (например) оставьте AppComponent в качестве компонента начальной загрузки и добавьте туда <router-outlet> и меню:

<p>App component works</p>
<button (click)="onClick()">Home</button>
<button (click)="goToSomeOtherPage()">Some other page</button>
<router-outlet></router-outlet>

Затем отредактируйте определение маршрутов, чтобы пользователь не видел пустой путь:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch:'full'},
  { path: 'home', component: HomeComponent },
  { path: 'some/other/page', component: SomeOtherComponent },
];

По мере того, как меню становится сложнее, вы можете разделить его на отдельный компонент (например, MainMenuComponent), используя дочерние маршруты.

1
Markus Pscheidt 12 Дек 2020 в 17:58