路由系统它工作未使用 angular 12

Question

我是 angular 的初学者，我参加了培训，我达到了路由系统，我通过命令 ng g m routes --routing 创建了路由系统，我声明了路由，我更改了标签 <home></home>通过 <router-outlet></router-outlet> 没有显示。

home.component.html

<sliders [rowOfSliders]="rowSliders"></sliders>
<div class="container">
    <h2 class="mt-5">Nos Services</h2>
    <hr>
    <services [rowOfServices]="rowServices"></services>
    
    <h2 class="mt-5">Nos Actualites</h2>
    <hr>
    <posts [rowsOfPosts]="rowPosts"></posts> 
</div>

app.component.html

<menu></menu>
<router-outlet></router-outlet>

app.module.ts

import { RoutesModule } from './routes/routes.module';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { AcceuilComponent } from './components/acceuil/acceuil.component';
import { BlogComponent } from './components/blog/blog.component';
import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
import { ContactComponent } from './components/contact/contact.component';
import { FooterComponent } from './components/footer/footer.component';
import { MenuComponent } from './components/menu/menu.component';
import { MessageComponent } from './components/message/message.component';
import { PostsComponent } from './components/posts/posts.component';
import { ServiceComponent } from './components/service/service.component';
import { ServicesComponent } from './components/services/services.component';
import { ShowPostComponent } from './components/show-post/show-post.component';
import { ShowServiceComponent } from './components/show-service/show-service.component';
import { SlidersComponent } from './components/sliders/sliders.component';

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent,
    AcceuilComponent,
    BlogComponent,
    BreadcrumbComponent,
    ContactComponent,
    FooterComponent,
    MenuComponent,
    MessageComponent,
    PostsComponent,
    ServiceComponent,
    ServicesComponent,
    ShowPostComponent,
    ShowServiceComponent,
    SlidersComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    MDBBootstrapModule.forRoot(),
    RoutesModule
  ],
  providers: [

  ],
  bootstrap: [AppComponent],
  schemas:[NO_ERRORS_SCHEMA]
})
export class AppModule { }

Answer 1

Angular 路由将 url 路径路由到组件，如下所示：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ComponentToRoute } from './myComponentPath/myComponent.component';

const routes: Routes = [
  { path: "ComponentPath", component: ComponentToRoute }
];

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

导航到 localhost:4200/ComponentPath 时，<router-outlet> 将输出该 url 路径上列出的组件。

如果这是您的路由模块的样子，它可能在您的 app.module.ts 中缺少引用，它应该如下所示：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { ComponentToRoute } from './myComponentPath/myComponent.component';

@NgModule({
  declarations: [
    AppComponent,
    ComponentToRoute 
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

路由系统它工作未使用 angular 12

routing system it works not used angular 12

angular-routing

angular