组件未以角度 4 加载

Question

基本上路由 /users 不起作用，当我进入那里时，它会带来组件 AppComponent 而不是 UsersComponent。

为什么路由 /users 没有加载正确的组件？

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';
import { AppRouting } from './app-routing.component'

@NgModule({
  declarations: [
    AppComponent,
    UsersComponent
  ], 
   imports: [
    BrowserModule,
    AppRouting,
    FormsModule
    // other imports here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

user.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app-routing.component.ts

import { UsersComponent } from './users/users.component';

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


const routes:Routes =[
    {path:'',redirectTo:'/', pathMatch:'full'},
    //{path:'appcomponent',component:AppComponent},
    { path: 'users',      component: UsersComponent }
];

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


}

在 html 代码中我只想显示这个：

user.component.html

<p>
  users works!
</p>

Answer 1

啊。我现在明白了。如果要显示路由组件以占据整个显示区域，则需要将 app.component.html 定义为仅具有路由器出口。没有其他元素。

我做过类似的事情，我有一个带有菜单的组件。我想显示一些没有该菜单的组件，例如登录组件。

我使用多级路由器插座做到了这一点。

应用组件

我只用一个路由器出口定义了根应用程序组件。然后，当我希望组件在没有菜单的情况下出现时，我会路由到该组件。

<router-outlet></router-outlet>

外壳组件

然后我定义了一个带有第二个路由器插座的“外壳”组件。这是我定义菜单的地方。任何我想在菜单中出现的东西，我都会路由到这个路由器插座。

<mh-menu></mh-menu>
<div class='container'>
   <router-outlet></router-outlet>
</div>

路由模块

然后使用children 属性配置路由以定义路由到ShellComponent 的路由。

这样，任何组件都不需要知道菜单应该打开还是关闭。都是由路由配置决定的。

RouterModule.forRoot([
  {
    path: '',
    component: ShellComponent,
    children: [
      { path: 'welcome', component: WelcomeComponent },
      { path: 'movies', component: MovieListComponent },
      { path: '', redirectTo: 'welcome', pathMatch: 'full' }
    ]
  },
  { path: 'login', component: LoginComponent }
  { path: '**', component: PageNotFoundComponent }
])

显示应用路由器出口的区域。

显示外壳路由器出口的区域。

Answer 2

您需要在AppComponent模板中提供router-outlet。

...
<router-outlet></router-outlet>
...