Angular 7 个嵌套组件

Question

我是一个有 WPF 经验的人。现在我决定尝试网络开发

以及从经验中学习而不是阅读的人

我正在尝试创建一个简单的网络应用程序。

Angular 7 使用 bootstrap 4

所以我创建了一个简单的 Angular 安装应用程序 bootstrap 4 然后复制 dashboard.html 的代码并修改此模板 https://www.creative-tim.com/product/material-dashboard 我知道有一个Angular 此模板的版本，但我想了解其工作原理。

我已经在 angular 应用中成功使用了模板

Template Screenshot

但是我想把模板的导航分开

所以我添加了一个名为 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>

但是我的 Web 中没有显示导航这是现在的样子

Screenshot of the component that is not working

这是 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 { }

我错过了什么？

如果我需要post 来自另一个文件的代码。请告诉我。谢谢。

Answer 1

需要导航组件的完整代码才能确定，但有根据的猜测是您需要使用 <app-nav></app-nav>。检查导航组件

的选择器属性

Angular 7 个嵌套组件

Angular 7 Nested Components

angular2-components

angular

angular7