选择器“app-tool-tip”不匹配任何元素我该如何解决这个问题？

Question

我需要制作一个简单的工具提示，并且我已经从这里实现了以下内容：https://ng-bootstrap.github.io/#/components/tooltip/examples

我得到的是这个错误：选择器“app-tool-tip”没有匹配任何元素

这是我的工具提示组件：

工具提示模块：

import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {NgbdTooltipComponent} from './tool-tip.component';

@NgModule({
  imports: [BrowserModule, FormsModule, NgbModule],
  declarations: [NgbdTooltipComponent],
  exports: [NgbdTooltipComponent],
  bootstrap: [NgbdTooltipComponent]
})
export class NgbdTooltipModule {}

工具提示组件

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

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

  @Input() toolTip: string;
  constructor() {}

  ngOnInit() {
  }

}

工具提示 HTML

<button type="button" class="btn btn-outline-secondary mr-2" 
        placement="top" ngbTooltip="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-outline-secondary mr-2" 
        placement="right" ngbTooltip="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-outline-secondary mr-2" 
        placement="bottom" ngbTooltip="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-outline-secondary mr-2" 
        placement="left" ngbTooltip="Tooltip on left">
  Tooltip on left
</button>

这是我的 app-component.html

<div
  *ngIf="loading"
  class="loading d-flex align-items-center">

  <div class="container">

    <div class="row justify-content-center">

      <div class="col-md pt-3">

        <div class="loading__brand"></div>

        <h1 class="h3 my-3 text-center text-muted">Loading...</h1>
      </div>
    </div>
  </div>
</div>
<app-error-message *ngIf="showError" ng-class="{fade:doFade}" [errorMessage]="errorMessage"></app-error-message>
<app-tool-tip></app-tool-tip>

这是在我的 app.module.ts 中导入的

import {NgbdTooltipModule} from './components/tool-tip/tool-tip.module';

这是我的 main.ts

platformBrowserDynamic()
  .bootstrapModule(NgbdTooltipModule)
  .then(ref => {
    // Ensure Angular destroys itself on hot reloads.
    if (window[<any>'ngRef']) {
      window['ngRef'].destroy();
    }
    window['ngRef'] = ref;

    // Otherwise, log the boot error
  })
  .catch(err => console.error(err));

我该如何解决这个问题，为什么找不到：app-tool-tip 选择器？

Answer 1

我没有在您为 AppComponent 和 AppModule 提供的代码中看到。您应该引导您的 AppModule（在 main.ts 中），并将您的 NgbdTooltipModule 导入 app.module.ts 文件。请参阅下面的示例。希望对你有帮助。

Stackblitz 项目： https://stackblitz.com/edit/ngbd-tooltips

// main.ts Main Entry

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule) // Bootstrap AppModule
.then(ref => {
  // Ensure Angular destroys itself on hot reloads.
  if (window[<any>'ngRef']) {
    window['ngRef'].destroy();
  }
  window['ngRef'] = ref;

  // Otherwise, log the boot error
})
  .catch(err => console.error(err));


// app.module.ts - App Module: 

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdTooltipModule } from './ngbd-tooltip/ngbd-tooltip.module';

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


// ngbd-tooltip.module.ts - Tooltip Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbdTooltipComponent } from './ngbd-tooltip.component';



@NgModule({
  declarations: [NgbdTooltipComponent], // Declare NgbdTooltipComponent
  imports: [
    CommonModule
  ],
  exports: [NgbdTooltipComponent] // Export NgbdTooltipComponent
})
export class NgbdTooltipModule { }