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，您可以直接按类访问该指令：

 @ViewChild(ModalDirective) private alertModal:ModalDirective;

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

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

但是，为了实现这一点，ModalDirective类必须在装饰器中定义exportAs，如下所示：

@Directive({
   exportAs: "alertModal"

没有指令＆＃34; exportAs＆＃34;对于ng2-bootstrap

2 个答案: