Угловые 7 вложенных компонентов - PullRequest
Новая
       30

Угловые 7 вложенных компонентов

0 голосов
/ 10 июля 2019

Я парень с опытом работы в WPF.И теперь я решил попробовать веб-разработку

И кого-то, кто учится на собственном опыте вместо того, чтобы читать

Я пытаюсь создать простое веб-приложение.

Angular7, который использует bootstrap 4

Так что я создал простой загрузчик Angular App с установленным 4, а затем скопировал код dashboard.html с модификацией этого шаблона https://www.creative -tim.com / product / material-Панель управления Я знаю, что для этого шаблона есть версия Angular, но я хочу узнать, как все это работает.

Я успешно использовал шаблон в приложении Angular

ШаблонСнимок экрана

Но я хочу разделить навигацию по шаблону

Поэтому я добавил компонент с именем nav и вставил в него код 

<li class="nav-item active  ">
            <a class="nav-link" href="./dashboard.html">
              <i class="material-icons">dashboard</i>
              <p>Dashboard</p>
            </a>
          </li>

Тогда это код для моего app.component.html 

<div class="sidebar-wrapper">
        <ul class="nav">
            <nav></nav>

        </ul>
      </div>

Но навигация не отображается в моем Интернете, это то, что сейчас выглядит

Снимок экрана компонентаэто не работает

Это код для app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Что я пропустил?

Если мне нужно отправить код из другого файла.Пожалуйста, дайте мне знать.Спасибо.

1 Ответ

1 голос
/ 10 июля 2019

Потребуется полный код для компонента nav, чтобы быть уверенным, но обоснованным предположением будет то, что вам нужно вместо этого использовать <app-nav></app-nav>.Проверьте свойство селектора вашего навигационного компонента

...