Rout没有加载组件。

Question

我试图在社交媒体和公司之间导航，但当我点击公司时，它的组件正在加载，但当我访问社交媒体时，我会出错

错误我得到-错误:未知(承诺)：错误:不能匹配任何路由。URL段：“社交媒体”错误:无法匹配任何路由。URL片段：“社交媒体”

我把代码的细节写在下面

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

在您的app-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

必须在RouterModule.forChild(routes)导入数组中使用RouterModule来声明，如果使用lazyModule概念，则需要使用声明路由。

    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 { }