角度路线有效，但不显示组件

Question

我使用Angular 4，当我点击按钮时，路线会激活，但不会显示该组件。

LISTA-sistema.components.ts

import { ActivatedRoute } from '@angular/router';
import { ListaSistemasService } from './lista-sistema.service';
import { Component, OnInit, Inject } from '@angular/core';

@Component({
  selector: 'app-lista-sistema',
  templateUrl: './lista-sistema.component.html',
  styleUrls: ['./lista-sistema.component.scss']
})
export class ListaSistemaComponent implements OnInit {

  sistemas;

  constructor( @Inject(ListaSistemasService) private sistemasService: ListaSistemasService,
  @Inject(ActivatedRoute) private route: ActivatedRoute ) {
    console.log(this.route);
  }

  ngOnInit() {
    this.sistemasService.getSistemasArea()
    .subscribe(sistema => this.sistemas = sistema) ;
  }

}

LISTA-sistema.component.html

 <md-card-title>Sistemas</md-card-title>
 <md-nav-list *ngFor="let sistema of sistemas">
     <md-list-item routerLink="/sistemas/{{sistema.ID}}" > {{ sistema.Nome }}  </md-list-item>
 </md-nav-list>

此组件导致此模块

import { DetalheSistemaRoutingModule } from './detalhe-sistema-routing.module';
import { NgModule } from '@angular/core';

import { DetalheSistemaComponent } from './detalhe-sistema.component';
import { TituloSistemaComponent } from './titulo-sistema/titulo-sistema.component';    


@NgModule({
    imports: [DetalheSistemaRoutingModule],
    exports: [],
    declarations: [
        DetalheSistemaComponent,
        TituloSistemaComponent,

    ],
    providers: [],
})
export class DetalheSistemaModule { }

显示此组件为空白以进行测试

import { ActivatedRoute } from '@angular/router';
import { Component, OnInit, Inject } from '@angular/core';

@Component({
  selector: 'app-detalhe-sistema',
  templateUrl: './detalhe-sistema.component.html',
  styleUrls: ['./detalhe-sistema.component.scss']
})
export class DetalheSistemaComponent implements OnInit {

  constructor(@Inject(ActivatedRoute) private route: ActivatedRoute) {


   }

  ngOnInit() {
  }

}

HTML组件

<router-outlet></router-outlet>

这仅用于显示另一个默认的componentsnent.html。

这是路由模块，但不是主要的

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

import { DetalheSistemaComponent } from './detalhe-sistema.component';

const detalheSistemaRoutes: Routes = [
  { path: 'sistemas/:id ', component: DetalheSistemaComponent },
];

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

export const routedComponents = [DetalheSistemaComponent];