Angular使用网站模板作为组件

Question

出于学习目的，我想将导航模板用作Angular项目的一部分。

导航模板在这里： Navigation Template

我下载了源代码并按如下所示实施了该源代码

目录结构为： Directory structure

app.component.ts，app.component.css和app.component.html等代码是

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-home';
}

@font-face {
  font-family: 'feather';
  font-weight: normal;
  font-style: normal;
  src: url('../assets/app/fonts/feather/feather.eot?1gafuo');
  src: url('../assets/app/fonts/feather/feather.eot?1gafuo#iefix') format('embedded-opentype'), url('../assets/app/fonts/feather/feather.woff2?1gafuo') format('woff2'),  url('../assets/app/fonts/feather/feather.ttf?1gafuo') format('truetype'),  url('../assets/app/fonts/feather/feather.woff?1gafuo') format('woff'),  url('../assets/app/fonts/feather/feather.svg?1gafuo#feather') format('svg');
}

.icon {
  font-family: 'feather', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}

.icon--arrow-left:before {
  content: '\e901';
}

.icon--menu:before {
  content: '\e903';
}

.icon--cross:before {
  content: '\e117';
}


/* Menu styles */

.menu {
  position: fixed;
  top: 120px;
  left: 0;
  width: 300px;
  height: calc(100vh - 120px);
  background: #1c1d22;
}

.menu__wrap {
  position: absolute;
  top: 3.5em;
  bottom: 0;
  overflow: hidden;
  width: 100%;
}

.menu__level {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow: hidden;
  overflow-y: scroll;
  width: calc(100% + 50px);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.menu__level--current {
  visibility: visible;
}

.menu__item {
  display: block;
  width: calc(100% - 50px);
}

.menu__link {
  font-weight: 600;
  position: relative;
  display: block;
  padding: 1em 2.5em 1em 1.5em;
  color: #bdbdbd;
  -webkit-transition: color 0.1s;
  transition: color 0.1s;
}

.menu__link[data-submenu]::after {
  content: '\e904';
  font-family: 'feather';
  position: absolute;
  right: 0;
  padding: 0.25em 1.25em;
  color: #2a2b30;
}

.menu__link:hover,
.menu__link[data-submenu]:hover::after {
  color: #5c5edc;
}

.menu__link--current::before {
  content: '\00B7';
  font-size: 1.5em;
  line-height: 0;
  position: absolute;
  top: 50%;
  left: 0.5em;
  height: 4px;
  color: #5c5edc;
}

[class^='animate-'],
[class*=' animate-'] {
  visibility: visible;
}

.animate-outToRight .menu__item {
  -webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
  animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}

@-webkit-keyframes outToRight {
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes outToRight {
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.animate-outToLeft .menu__item {
  -webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
  animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}

@-webkit-keyframes outToLeft {
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes outToLeft {
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.animate-inFromLeft .menu__item {
  -webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
  animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}

@-webkit-keyframes inFromLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes inFromLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate-inFromRight .menu__item {
  -webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
  animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}

@-webkit-keyframes inFromRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes inFromRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.menu__breadcrumbs {
  font-size: 0.65em;
  line-height: 1;
  position: relative;
  padding: 2.5em 3.75em 1.5em 2.5em;
}

.menu__breadcrumbs a {
  font-weight: bold;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5c5edc;
}

.menu__breadcrumbs a:last-child {
  pointer-events: none;
}

.menu__breadcrumbs a:hover {
  color: #8182e0;
}

.menu__breadcrumbs a:not(:last-child)::after {
  content: '\e902';
  font-family: 'feather';
  display: inline-block;
  padding: 0 0.5em;
  color: #33353e;
}

.menu__breadcrumbs a:not(:last-child):hover::after {
  color: #33353e;
}

.menu__back {
  font-size: 1.05em;
  position: absolute;
  z-index: 100;
  top: 0;
  right: 2.25em;
  margin: 0;
  padding: 1.365em 0.65em 0 0;
  cursor: pointer;
  color: #2a2b30;
  border: none;
  background: none;
}

.menu__back--hidden {
  pointer-events: none;
  opacity: 0;
}

.menu__back:hover,
.menu__back:focus {
  color: #fff;
  outline: none;
}


/* Open and close buttons */

.action {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  background: none;
}

.action:focus {
  outline: none;
}

.action--open {
  font-size: 1.5em;
  top: 1em;
  left: 1em;
  display: none;
  color: #fff;
  position: fixed;
  z-index: 1000;
}

.action--close {
  font-size: 1.1em;
  top: 1.25em;
  right: 1em;
  display: none;
  color: #45464e;
}

/* Example media query */
@media screen and (max-width: 40em) {
  .action--open,
  .action--close {
    display: block;
  }
  .menu {
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 100vh;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
  }
  .menu--open {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

<!--The content below is only a placeholder and can be replaced.-->
<body>
<!-- Main container -->
<div class="container">
  <!-- menu toggle for mobile version -->
  <button class="action action--open" aria-label="Open Menu"><span class="icon icon--menu"></span></button>
  <!-- menu -->
  <nav id="ml-menu" class="menu">
    <!-- close button for mobile version -->
    <button class="action action--close" aria-label="Close Menu"><span class="icon icon--cross"></span></button>
    <div class="menu__wrap">
      <ul data-menu="main" class="menu__level">
        <li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Menu 1</a></li>
        <li class="menu__item"><a class="menu__link" data-submenu="submenu-2" href="#">Menu 2</a></li>
        <li class="menu__item"><a class="menu__link" data-submenu="submenu-3" href="#">Menu 3</a></li>
        <li class="menu__item"><a class="menu__link" data-submenu="submenu-4" href="#">Menu 4</a></li>
      </ul>
      <!-- submenu 1 -->
      <ul data-menu="submenu-1" class="menu__level">
        <li class="menu__item"><a class="menu__link" href="#">Submenu1 item1</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu1 item2</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu1 item3</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu1 item4</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu1 item5</a></li>
        <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1" href="#">Submenu1 menu1</a></li>
      </ul>
      <!-- submenu 1-1 -->
      <ul data-menu="submenu-1-1" class="menu__level">
        <li class="menu__item"><a class="menu__link" href="#">Submenu1-1 item1</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu1-1 item2</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu1-1 item3</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu1-1 item4</a></li>
      </ul>
      <!-- submenu 2 -->
      <ul data-menu="submenu-2" class="menu__level">
        <li class="menu__item"><a class="menu__link" href="#">Submenu2 item1</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu2 item2</a></li>
        <li class="menu__item"><a class="menu__link" data-submenu="submenu2-1" href="#">Submenu2 menu1</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu2 item3</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu2 item4</a></li>
      </ul>
      <!-- submenu 2-1 -->
      <ul data-menu="submenu-2-1" class="menu__level">
        <li class="menu__item"><a class="menu__link" href="#">Submenu2-1 item1</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu2-1 item2</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu2-1 item3</a></li>
      </ul>
      <!-- submenu 3 -->
      <ul data-menu="submenu-3" class="menu__level">
        <li class="menu__item"><a class="menu__link" href="#">Submenu3 item1</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu3 item2</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu3 item3</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Submenu3 item4</a></li>
        <li class="menu__item"><a class="menu__link" data-submneu="submenu3-1">Submenu4 menu1</a></li>
      </ul>
      <!-- Submenu 3-1 -->
      <ul data-menu="submenu-3-1" class="menu__level">
        <li class="menu__item"><a class="menu__link" href="#">Starter Kit</a></li>
        <li class="menu__item"><a class="menu__link" href="#">The Essential 8</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Bolivian Secrets</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Flour Packs</a></li>
      </ul>
      <!-- Submenu 4 -->
      <ul data-menu="submenu-4" class="menu__level">
        <li class="menu__item"><a class="menu__link" href="#">Grain Mylks</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Seed Mylks</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Nut Mylks</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Nutri Drinks</a></li>
        <li class="menu__item"><a class="menu__link" data-submenu="submenu-4-1" href="#">Selection</a></li>
      </ul>
      <!-- Submenu 4-1 -->
      <ul data-menu="submenu-4-1" class="menu__level">
        <li class="menu__item"><a class="menu__link" href="#">Nut Mylk Packs</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Amino Acid Heaven</a></li>
        <li class="menu__item"><a class="menu__link" href="#">Allergy Free</a></li>
      </ul>
    </div>
  </nav>
  <div class="content">
    <p class="info">Please choose a category</p>
    <router-outlet></router-outlet>
    <!-- contents here -->
  </div>
</div>
</body>

<!-- /view -->
<script src="js/classie.js"></script>
<script src="js/dummydata.js"></script>
<script src="js/main.js"></script>
<script>
  (function() {
    var menuEl = document.getElementById('ml-menu'),
      mlmenu = new MLMenu(menuEl, {
        // breadcrumbsCtrl : true, // show breadcrumbs
        // initialBreadcrumb : 'all', // initial breadcrumb text
        backCtrl : false, // show back button
        // itemsDelayInterval : 60, // delay between each menu item sliding animation
        onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item])
      });

    // mobile menu toggle
    var openMenuCtrl = document.querySelector('.action--open'),
      closeMenuCtrl = document.querySelector('.action--close');

    openMenuCtrl.addEventListener('click', openMenu);
    closeMenuCtrl.addEventListener('click', closeMenu);

    function openMenu() {
      classie.add(menuEl, 'menu--open');
    }

    function closeMenu() {
      classie.remove(menuEl, 'menu--open');
    }

    // simulate grid content loading
    var gridWrapper = document.querySelector('.content');

    function loadDummyData(ev, itemName) {
      ev.preventDefault();

      closeMenu();
      gridWrapper.innerHTML = '';
      classie.add(gridWrapper, 'content--loading');
      setTimeout(function() {
        classie.remove(gridWrapper, 'content--loading');
        gridWrapper.innerHTML = '<ul class="products">' + dummyData[itemName] + '<ul>';
      }, 700);
    }
  })();
</script>

但是它不能按以下方式工作。 result