Question

我是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>

我不明白为什么启动服务器时默认页面为空，而不显示 home.component.html 中包含的html。

我该如何解决？

Answer 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。

希望这会有所帮助。

为什么我在AngularJS中的路由不起作用？

1 个答案: