Rout 没有加载组件

Question

我试图在 social media 和 company 之间导航，但是当我点击公司时它的组件正在加载但是当我点击社交媒体我收到错误

错误我得到 - 错误错误：未捕获（承诺）：错误：无法匹配任何路线。 URL 细分：'social-media' 错误：无法匹配任何路由。 URL 段：'social-media'

我将代码的详细信息放在下面

app-routing.module.ts 文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes } from '@angular/router';
import { D7socialMediaComponent } from './d7social-media/d7social-media.component';
import { CompanyComponent } from './company/company.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }
export const routes: Routes = [

  {path: 'social-media' , component: D7socialMediaComponent},
   {path: 'company' , component: CompanyComponent},

];

app.component.html

 <nav>
    <a routerLink="/social-media"> Social Media </a>
    <a routerLink="/company"> Company </a>
    </nav>

    <router-outlet></router-outlet>

d7social-media.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-d7social-media',
  templateUrl: './d7social-media.component.html',
  styleUrls: ['./d7social-media.component.css']
})
export class D7socialMediaComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

在您的应用中-routing.module 添加：

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

    imports: [
            CommonModule,
            RouterModule.forRoot(routes),
    ]

将您的应用程序模块更改为：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { D7socialMediaComponent } from './d7social-media/d7social-media.component';
import { CompanyComponent } from './company/company.component';

export const routes: Routes = [

  {path: 'social-media' , component: D7socialMediaComponent},
  {path: 'company' , component: CompanyComponent},

];

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

Answer 2

您必须在 imports 数组中使用 RouterModule 声明 routes，如果您使用的是 lazyModule 概念，则需要用 RouterModule.forChild(routes)

声明路由

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterModule, Routes } from '@angular/router';
    import { D7socialMediaComponent } from './d7social-media/d7social-media.component';
    import { CompanyComponent } from './company/company.component';

    const appRoutes: Routes = [
         {path: 'social-media' , component: D7socialMediaComponent},
         {path: 'company' , component: CompanyComponent},
    ];

    @NgModule({
      imports: [
        CommonModule,
        RouterModule.forRoot(ppRoutes)
      ],
      declarations: []
    })
    export class AppRoutingModule { }

Rout 没有加载组件

Rout is not loading the component

angular

angular-ui-router

angular-routing