路由：组件无法显示

Question

我是 Angular 新手，我想创建一个 URL 为 localhost:4200/register 的页面。

这是我尝试过的：

src/app/app-routing-modules.ts

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {RegisterComponent} from './register/register.component';

const routes: Routes = [
  { path: 'register', component: RegisterComponent }
];

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

src/app/register/register.component.html

<p>register works!</p>
<router-outlet></router-outlet>

我还在 app.modules.ts 中导入了AppRoutingModule。

如果 URL 为 localhost:4200/register，则页面包含应用组件，但我的组件“注册”无法显示。

我做错了什么？

Answer 1

<router-outlet></router-outlet>应该添加到被引导的组件中（默认为AppComponent）

试试这样：

const routes: Routes = [
  { path: '', component: LandingComponent }
  { path: 'register', component: RegisterComponent }
];

register.component.html

<p>register works!</p>

app.componet.html

<router-outlet></router-outlet>

注意：LandingComponent 只是一个您希望默认显示的组件，如主页、登录页面等