Прежде чем кто-то пометит этот вопрос как дубликат, я попробовал ответить на следующие вопросы:
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-адрес изменяется. Так почему же связанный компонент не загружается? Я пропустил какую-то часть конфигурации? Вот демонстрация
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
), используя дочерние маршруты.
Похожие вопросы
Связанные вопросы
Новые вопросы
angular
Вопросы по Angular (не путать с AngularJS), веб-фреймворку от Google. Используйте этот тег для угловых вопросов, которые не относятся к конкретной версии. Для более старой веб-платформы AngularJS (1.x) используйте тег angularjs.