角度路线：子路线已加载但未呈现

Question

我在路由时遇到问题，如下面的代码所示，我将空路径重定向为完整路径匹配的home，然后在该目录中加载我的MainComponent和一些子项，而我试图加载，因为我的第一个孩子的路径是空的，所以当它首先重定向到home时就使用了它，那么这将与下一个和平的代码相匹配，下面的代码将加载HomeFiveComponent，并且正如我在组件中放置一些日志一样它会被打印出来，但除了索引页面外什么也不会打印。

应用路线：

export const rootRouterConfig: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: MainComponent,
    children: [
      {
        path: '',
        loadChildren: './shop/shop.module#ShopModule'
      },
      {
        path: 'pages',
        loadChildren: './pages/pages.module#PagesModule'
      }
    ]
  },
  {
    path: '**',
    redirectTo: 'pages/404'
  }
];

shop.routes：

const routes: Routes = [
  { 
    path: '',
    component: HomeFiveComponent
  },

]

MainComponent：

import { Component, OnInit, Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { ProductsService } from '../shared/services/products.service';
import { CartService } from '../shared/services/cart.service';
import { WishlistService } from '../shared/services/wishlist.service';
import { BrandsService } from '../shared/services/brands.service';
import * as $ from 'jquery';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss'],
  providers: [ProductsService, CartService, WishlistService, BrandsService]
})
@Injectable()
export class MainComponent implements OnInit {

  public url: any;

  constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.url = event.url;
      }
    });
  }

  ngOnInit() {
    $.getScript('assets/js/script.js');
  }

}

MainCompnent.html：

<app-header-one></app-header-one>
<router-outlet></router-outlet>
<app-footer-one></app-footer-one>

script.js：

"use strict";
$(document).ready(function() {

  /*=====================
   01.Pre loader
   ==========================*/
  $('.loader-wrapper').fadeOut('slow', function() {
    $(this).remove();
  });


  /*=====================
   02.Tap on Top
   ==========================*/
  $(window).on('scroll', function() {
    if ($(this).scrollTop() > 600) {
      $('.tap-top').fadeIn();
    } else {
      $('.tap-top').fadeOut();
    }
  });
  $('.tap-top').on('click', function() {
    $("html, body").animate({
      scrollTop: 0
    }, 600);
    return false;
  });


  /*=====================
   03. toggle nav
   ==========================*/
  $('.toggle-nav').on('click', function() {
    $('.sm-horizontal').css("right", "0px");
  });
  $(".mobile-back").on('click', function() {
    $('.sm-horizontal').css("right", "-410px");
  });



  /*=====================
   04. footer according
   ==========================*/
  var contentwidth = jQuery(window).width();
  if ((contentwidth) < '750') {
    jQuery('.footer-title h4').append('<span class="according-menu"></span>');
    jQuery('.footer-title').on('click', function() {
      jQuery('.footer-title').removeClass('active');
      jQuery('.footer-contant').slideUp('normal');
      if (jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
      }
    });
    jQuery('.footer-contant').hide();
  } else {
    jQuery('.footer-contant').show();
  }

  if ($(window).width() < '1183') {
    jQuery('.menu-title h5').append('<span class="according-menu"></span>');
    jQuery('.menu-title').on('click', function() {
      jQuery('.menu-title').removeClass('active');
      jQuery('.menu-content').slideUp('normal');
      if (jQuery(this).next().is(':hidden') == true) {
        jQuery(this).addClass('active');
        jQuery(this).next().slideDown('normal');
      }
    });
    jQuery('.menu-content').hide();
  } else {
    jQuery('.menu-content').show();
  }

  /*=====================
   05.RTL js
   ==========================*/
  $(".rtl-btn").click(function() {
    $(this).toggleClass("active");
    if ($(this).hasClass('active')) {
      $("html").attr("dir", "rtl");
      $("body").addClass('rtl');
    } else {
      $("html").attr("dir", "ltr");
      $("body").removeClass('rtl');
    }
  });
});

编辑：

如果我具有以下配置，我的代码可以正常工作：

export const rootRouterConfig: Routes = [
  {
    path: 'test',
    redirectTo: 'home/product/shop',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: MainComponent,
    children: [
      {
        path: 'product',
        loadChildren: './shop/shop.module#ShopModule'
      },
      {
        path: 'pages',
        loadChildren: './pages/pages.module#PagesModule'
      }
    ]
  },
  {
    path: '**',
    redirectTo: 'pages/404'
  }
];

和shop.routes：

  { 
    path: 'shop',
    component: HomeFiveComponent
  }