ホーム>source

私は間を移動しようとしていますソーシャルメディア そして会社 、しかし、私が会社を襲ったとき、それはコンポーネントがロードされていますが、ソーシャルメディアを叩いているときにエラーが発生しています

私が得ているエラー-  エラーエラー:キャッチされません(約束):エラー:どのルートにも一致しません。 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() {
  }
}

あなたの答え
  • 解決した方法 # 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 { }
    
    

  • 解決した方法 # 2

    routes を宣言する必要があります  とRouterModule に輸入品 配列を使用し、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 { }
    
    

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ databricks - InvokeHttp NiFiを介してmultipart/form-dataを送信する方法