两个路由器 Angular5 不工作

Question

principal.component.html

[...]
<a routerLink="/empresa-list">Abrir</a>
[...]
<main>
<router-outlet name="content"><router-outlet>
</main>
[...]

app.compoment.html

<router-outlet><router-outlet>

app.routing.module.ts

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Router } from "@angular/router";
import { Routes } from "@angular/router";

const ROUTES:Routes =[

    {path:'principal', loadChildren: 'app/principal/principal.module#PrincipalModule'}
]

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

principal.routing.module.ts

import { Routes } from "@angular/router";
import { PrincipalComponent } from "./principal.component";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { EmpresaListasComponent } from "../empresa/empresa-listas/empresa-listas.component";

const PRINCIPAL_ROUTES: Routes = [
    {path: '', component: PrincipalComponent},
    {path: 'empresa-list', component:EmpresaListasComponent, outlet: 'content'}
];

@NgModule({
    imports:[RouterModule.forChild(PRINCIPAL_ROUTES)],
    exports: [RouterModule]
})
export class PrincipalRoutingModule{}

app.module.ts

@NgModule({
  declarations: [
    AppComponent,


  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,                 
    PrincipalModule,
    AppRoutingModule,   

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

principal.module.ts

@NgModule({
declarations:[
    PrincipalComponent
],
 imports:[
    MaterializeModule,
    PrincipalRoutingModule,
    EmpresaModule

 ],
 exports:[PrincipalComponent]
})
export class PrincipalModule{}

现在让我们进入我的问题。当我点击 empresa-list 路由器时，我在控制台中收到以下错误

Uncaught (in promise): Error: Can not match any routes. URL Segment: 'empresa-list' Error: Can not match any routes. URL Segment: 'empresa-list'

我已经尝试了很多方法来让它工作，但到目前为止都没有成功。我想要的是在 PrincipalComponent 的 main 标记内呈现 ComponentListComponent 组件。欢迎任何帮助。

Answer 1

不知道我理解的对不对。如果你想在 PrincipalComponent 中显示 EmpresaListasComponent 那么你应该让它成为子路由。你试过了吗？

const PRINCIPAL_ROUTES: Routes = [
    {path: '', component: PrincipalComponent,
      children: [
        {path: 'empresa-list', component:EmpresaListasComponent, outlet:'content'}
    ]
},
];

两个路由器 Angular5 不工作

Two Router Angular5 not works

typescript

angular2-template

angular2-routing

angular

angular5