如何在 Angular 6 的整个应用程序中公开菜单组件？

Question

我目前正在使用一个小的 Angular 6 应用程序结构，如下所示：

(shared.module.ts)

import { NgModule } from '@angular/core';
import { MainMenuComponent } from './main-menu/main-menu.component';
import { MainRoutingModule } from './main-routing/main-routing.module';
import { RouterModule } from '@angular/router';

@NgModule({
  exports: [
    MainRoutingModule,
    MainMenuComponent
  ],
  declarations: [MainMenuComponent]
})
export class SharedModule { }

(app.module.ts)

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

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { HolidaysModule } from './holidays/holidays.module';
import { AdminModule } from './admin/admin.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SharedModule,
    HolidaysModule,
    AdminModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

(app.component.html)

<div class="content">
  <app-main-menu></app-main-menu>
  <router-outlet></router-outlet>
  test
</div>

有一个 main-menu.component.html 只包含一个链接

<a routerLink="/holidays">Home</a>

问题： - 在这种结构下，显示“菜单”（基本上是唯一的链接），路由工作（MainRoutingModule 仅包含一些路由），除了链接被呈现为这样的事实（例如：routerLink 不会将元素转换为可点击的链接）。 - 如果我将主菜单组件移动到 app.module.ts，那么它会按预期呈现。

编辑：添加主菜单代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" routerLink="/holidays" routerLinkActive="active">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/admin" routerLinkActive="active">Admin</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>

组件：

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

@Component({
  selector: 'app-main-menu',
  templateUrl: './main-menu.component.html',
  styleUrls: ['./main-menu.component.css']
})
export class MainMenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

Answer 1

每当您将共享模块导入到模块中时，您必须导出您想要访问的任何组件、模块、指令或服务。

import { NgModule } from '@angular/core';
import { MainMenuComponent } from './main-menu/main-menu.component';
import { MainRoutingModule } from './main-routing/main-routing.module';
import { RouterModule } from '@angular/router';

@NgModule({
  exports: [
    MainRoutingModule,
    MainMenuComponent
  ],
  declarations: [MainMenuComponent],
  ///***HERE***
  exports: [MainMenuComponent]
})
export class SharedModule { }