对于 ng2-bootstrap，"exportAs" 没有指令

Question

我正在尝试让 ng-2 bootstrap 模式在我的代码中工作。我已经让 ng2-bootstrap 工具提示正常工作，但是模态给我带来了很多麻烦。我已经检查了所有相关的 github 页面和 stackover 流程问题，但我仍然无法弄清楚。这是我的设置：

我的router.html（模板）

...
<div class="modal fade" alertModal #staticModal="alert-modal" role="dialog" aria-labelledby="alertModal">`

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="alertModalTitle"></h3>
        </div>
        <div class="modal-body" id="alertModalBody">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>
...

我的部分 app.module.ts:

import { TooltipModule,ModalModule } from 'ng2-bootstrap';
@NgModule({
    imports: [ModalModule.forRoot(), TooltipModule.forRoot(), ...],
    declarations: [AppComponent,...],
    bootstrap: [AppComponent],
    providers: [...]
})
export class AppModule {}

我的 app.component.ts 使用此模态：

import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { MultistepService, StepDirection } from '../service/multistep.service';
import { ModalDirective } from 'ng2-bootstrap';

@Component({
    selector: 'my-app',
    host: {
      'class': 'container-fluid'  
    },
    templateUrl: './app/component/router.html'
})

export class AppComponent implements OnInit {

    @ViewChild('staticModal') 
    private alertModal:ModalDirective;

    <some methods here>
}

这是我收到的错误：

Template parse errors:
There is no directive with "exportAs" set to "alert-modal"

有什么我遗漏的吗？提前致谢！

Answer 1

在模板的第一行，将 #staticModal="alert-modal" 更改为 #staticModal

Answer 2

对于这部分：

<div class="modal fade" alertModal #staticModal="alert-modal"

已应用指令 alertModal。您正在尝试在组件中访问它：

 @ViewChild('staticModal') private alertModal:ModalDirective;

但是不需要引入模板引用变量staticModal，可以直接通过class:

访问指令

 @ViewChild(ModalDirective) private alertModal:ModalDirective;

如果您想在 html 的其他地方引用 ModalDirective 的实例，则需要模板引用变量 staticModal:

<div class="modal fade" alertModal #staticModal="alertModal"...
<span>{{staticModal.someProperty}}</span>

但是，要使 ModalDirective class 正常工作，必须在装饰器中定义 exportAs，如下所示：

@Directive({
   exportAs: "alertModal"

对于 ng2-bootstrap，"exportAs" 没有指令

There is no directive with "exportAs" for ng2-bootstrap

typescript

angular-ui-bootstrap

ng2-bootstrap

angular