Angular 6 - 来自共享模块的自定义组件未加载到应用模块的页面视图中

Question

我正在创建一个 Angular 6 应用程序，我现在专注于创建在我的共享模块中创建的可重用组件，以便能够在与我的应用程序模块相关的多个视图中使用。我现在正在使用 ngBootstrap 和 i18nService 创建一个语言选择器组件，该组件将在多个页面中使用，其中之一将是登录页面。这是我到目前为止所做的：

我的共享模块定义：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

// Shared components
import { LanguageSelectorComponent } from '@app/shared/language-selector/language-selector.component';

import { I18nService } from '@app/shared/i18n.service';
import { NgbModule } from '../../../node_modules/@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    CommonModule,
    NgbModule.forRoot(),
  ],
  declarations: [
    LoaderComponent,
    LanguageSelectorComponent
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  exports: [
    LoaderComponent,
    LanguageSelectorComponent
  ]
})
export class SharedModule {
  static forRoot() {
    return {
      ngModule: SharedModule,
      providers: [I18nService]
    };
  }
}

我的登录模块定义：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { LoginRoutingModule } from '@app/pages/login/login-routing.module';
import { LoginComponent } from '@app/pages/login/login.component';
import { SharedModule, LanguageSelectorComponent } from '@app/shared';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    TranslateModule,
    NgbModule,
    LoginRoutingModule,
    SharedModule
  ],
  declarations: [
    LoginComponent
  ],
  entryComponents: [LanguageSelectorComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
})
export class LoginModule { }

我的自定义共享组件定义（app-language-selector）：

import { Component, Input, OnInit } from '@angular/core';
import { I18nService } from '@app/shared/i18n.service';

@Component({
  selector: 'app-language-selector',
  templateUrl: './language-selector.component.html',
  styleUrls: ['./language-selector.component.scss']
})
export class LanguageSelectorComponent implements OnInit {

  @Input() customClass: string;
  @Input() customStyle = '';
  @Input() customPlacement = '';

  constructor(private i18nService: I18nService) {
  }

  setLanguage(language: string) {
    this.i18nService.language = language;
  }

  get currentLanguage(): string {
    return this.i18nService.language;
  }

  get languages(): string[] {
    return this.i18nService.supportedLanguages;
  }

  ngOnInit() {
    console.log('Language selector shared component loaded!');
  }

}

将使用此可重用的登录模板代码部分：

<div class="login-container bg-light">
  <div class="login-box">
    <h1>{{'APP_NAME' | translate}}</h1>
    <div>
      <h6 class="d-inline-block">v{{version}}</h6>
      <app-language-selector-component [customClass] = "'d-inline-block ml-3'">
      </app-language-selector-component>
    </div>

我在 Chrome 调试器控制台中看到组件相关文件已加载，但相关的 app-language-selector 组件的 html 没有，因此它仅显示为：

<app-login _nghost-c1=""><div _ngcontent-c1="" class="login-container bg-light">
  <div _ngcontent-c1="" class="login-box">
    <h1 _ngcontent-c1="">WindNetPro</h1>
    <div _ngcontent-c1="">
      <h6 _ngcontent-c1="" class="d-inline-block">v1.0.0-dev</h6>
      <app-language-selector-component _ngcontent-c1="">
      </app-language-selector-component>
    </div>

我在这里缺少什么？是和组件有关还是和ngBootstrap有关？

非常感谢！

Answer 1

你的选择器是

selector: 'app-language-selector',

不是app-language-selector-component

 <app-language-selector-component [customClass] = "'d-inline-block ml-3'">

因此，它不是作为组件受到威胁，而是作为纯 HTML 标记受到威胁。更改选择器或标记。