Почему мои маршруты в AngularJS не работают?

Я новичок в AngularJS и хочу создать простую форму входа и регистрации, но мои маршруты не работают.

Это мой app.routing.ts:

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

import { HomeComponent } from './home/home.component';
import { RegistrationComponent } from './registration/registration.component';

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'register', component: RegistrationComponent },
];

export const routing = RouterModule.forRoot(appRoutes);

Это app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { RegistrationComponent } from './registration/registration.component';
import { routing } from './app.routing';

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

Это app.component.html:

<router-outlet></router-outlet>

Я не понимаю, почему, когда я запускаю сервер, страница по умолчанию пуста, вместо того, чтобы показывать html, содержащийся в home.component.html.

Как я могу решить?

Можете ли вы опубликовать свой код AppComponent.html

Sajeetharan 25.08.2018 17:59

Мой app.component.html содержит в точности только тег, написанный выше.

Luigi Capogrosso 26.08.2018 12:42
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Порядок маршрутов очень важен, поскольку они оцениваются в том порядке, в котором они определены. По сути, в вашем примере Angular проверяет пустой маршрут '', и если такой маршрут найден, то должен быть загружен HomeComponent, и то, что вы видите, должно быть home.component.html. Самый простой способ проверить это - добавить контент в home.component.html.

Если вам нужно показать RegistrationComponent на пустом маршруте, я предлагаю изменить определение маршрута для пустого маршрута '' из:

{ path: '', component: HomeComponent },
{ path: 'register', component: RegistrationComponent }

к

{ path: 'register', component: RegistrationComponent },
{ path: '', redirectTo: 'register', pathMatch: 'full' }

Таким образом, Angular сначала проверит, соответствует ли URL-адрес маршруту register. В противном случае он проверит, является ли это маршрутом ''. В этом случае маршрутизатор переключится на маршрут register, который загрузит RegistrationComponent.

Надеюсь это поможет.

Что я хочу сделать, так это загрузить, в случае пустого пути, html, содержащийся в home.component.html. Но это не работает, и я не понимаю, почему.

Luigi Capogrosso 26.08.2018 12:40

Вы изменили определения маршрута на то, что я предложил?

Superiom 26.08.2018 15:59

Да, но не работает. Поскольку я импортировал модули маршрута и изменил файл app.component.html, я ничего не вижу на домашней странице и на других страницах.

Luigi Capogrosso 26.08.2018 19:19

Я создал демонстрация. Пожалуйста, проверьте это.

Superiom 26.08.2018 19:49

Рад слышать. Пожалуйста, примите мой ответ как решение, если вы не против.

Superiom 28.08.2018 17:01

Другие вопросы по теме