ng2-bootstrap 没有带有“exportAs”的指令答案

【问题标题】：There is no directive with "exportAs" for ng2-bootstrapng2-bootstrap 没有带有“exportAs”的指令
【发布时间】：2017-12-19 22:08:02
【问题描述】：

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

我的 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"

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

【问题讨论】：

他们将其设置为不等于某物，而是等于exportAs 变量github.com/valor-software/ngx-bootstrap/blob/development/src/… 您可以考虑#staticModal="bs-modal"，例如#something="exportAsVar"。您可以随意调用#variable，但它应该始终等于bs-modal，即#myMegaVariable="bs-modal"，然后您可以在模板中使用myMegaVariable.show()

标签： angular typescript angular-ui-bootstrap ng2-bootstrap

【解决方案1】：

对于这部分：

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

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

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

但是不需要引入模板引用变量staticModal，可以直接通过类访问指令：

 @ViewChild(ModalDirective) private alertModal:ModalDirective;

如果您想在 html 的其他位置引用 ModalDirective 的实例，则需要模板引用变量 staticModal：

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

但是，要使其工作，ModalDirective 类必须像这样在装饰器中定义 exportAs：

@Directive({
   exportAs: "alertModal"

【讨论】：

这太棒了！我想我现在明白了。它正在工作，但是当我在组件中使用模态时，我尝试执行“alertModal.show() 这是 ModalDirective 的内置函数。但是，它一直说 show is not a function 因为 alertModal 被视为“ElementRef " 对象，现在作为模态指令对象。你知道为什么会这样吗？
@aBrokenSniper，如果你这样查询它@ViewChild(ModalDirective)，那么它将包含正确的类。如果使用模板引用查询，则必须添加read参数，here我解释一下。

【解决方案2】：

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

【讨论】：

天哪，为什么会这样？！在他们的文档中，他们有这个例子：<div class="modal fade" bsModal #staticModal="bs-modal" ... > </div> 他们将静态模态 = 放在某物上。
那段代码只是创建了一个模板变量staticModal，以方便从@ViewChild 装饰器访问元素。它实际上不需要做任何其他事情！你可以用任何其他名称替换staticModal，只要它在两个位置都是一致的
啊，我明白了。所以你知道为什么在他们的例子中他们将它设置为等于某物吗？那部分让我很困惑。