A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Creando el CMS Module

13/25
Recursos

Aportes 5

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Layout

<div>
  <header>
    <h3>Title</h3>
  </header>
  <nav>
    <ul>
      <li><a routerLink="grid">Grid Page</a></li>
      <li><a routerLink="tasks">Tasks Page</a></li>
    </ul>
  </nav>
  <main>
    <router-outlet></router-outlet>
  </main>
</div>

layout.scss

div {
  display: grid;
  height: 100vh;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
      "header header header"
      "nav content content";
  header {
    grid-area: header;
    background-color: #3E51B5;
    color: white;
    padding: 1em;
    box-shadow: 1px 2px 4px 0 rgb(21 99 157 / 16%);
    border-bottom: 1px solid rgba(21,99,157,0.16);
  }
  nav {
    grid-area: nav;
    border-right: 1px solid rgba(21,99,157,0.16);
    background-color: #fff;
    a {
      margin: 0;
      padding: 0;
      padding: 1em;
      cursor: pointer;
      position: relative;
      display: block;
      text-decoration: none;
      color: #000;
    }
  }
  main {
    grid-area: content;
    background-color: #f3f8fb;
    padding: 1em;
  }
}```

Creando el m贸dulo CMS y los componentes

ng g m cms --routing
ng g c cms/pages/tasks
ng g c cms/pages/grid
ng g c cms/components/layout

Estilos del layout

div {
  display: grid;
  height: 100vh;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
      "header header header"
      "nav content content";
  header {
    grid-area: header;
    background-color: #3E51B5;
    color: white;
    padding: 1em;
    box-shadow: 1px 2px 4px 0 rgb(21 99 157 / 16%);
    border-bottom: 1px solid rgba(21,99,157,0.16);
  }
  nav {
    grid-area: nav;
    border-right: 1px solid rgba(21,99,157,0.16);
    background-color: #fff;
    a {
      margin: 0;
      padding: 0;
      padding: 1em;
      cursor: pointer;
      position: relative;
      display: block;
      text-decoration: none;
      color: #000;
    }
  }
  main {
    grid-area: content;
    background-color: #f3f8fb;
    padding: 1em;
  }
}

Me gusto la clase, de esta forma puedo manejar mejor mis rutas 馃捇.

Me est谩 saliendo este error

Error: src/app/cms/components/layout/layout.component.html:12:5 - error NG8001: 鈥榬outer-outlet鈥 is not a known element:

  1. If 鈥榬outer-outlet鈥 is an Angular component, then verify that it is part of this module.
  2. If 鈥榬outer-outlet鈥 is a Web Component then add 鈥楥USTOM_ELEMENTS_SCHEMA鈥 to the 鈥楡NgModule.schemas鈥 of this component to suppress this message.