Question

您好我已经创建了一个弹出按钮点击html，它工作正常。以下是我的HTML代码： {{标题}} {{注册}}

<div #myModal class="modal" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title">
                {{modalTitle}}
            </div>
        </div>
        <div class="modal-body">
          Username : <input type="text" placeholder="username">
          <br>
          <br>
          Password : <input type="password" placeholder="*****">         
        </div>
        <div class="modal-footer">
                <button id="btn1"type = "button" class="btn btn-primary">click me</button>
                <button type = "button" class="btn btn-secondary" class="data-dismiss">close</button>
        </div>
    </div>

</div>
</div>

下面是我的角度代码：

import { Component, Input ,ElementRef, ViewChild} from '@angular/core'
declare var jQuery:any;

@Component({
selector: 'header-comp',
templateUrl: `../html/header.component.html`,
styleUrls: [`../css/header.component.css`]
})
export class HeaderComponent
{
constructor(private el : ElementRef){}
title ="Welcome !!";
signUp ="signUp";
modalTitle ="Please enter your details!!!";
//@ViewChild('myModal')  displayModal:ElementRef ;
@ViewChild('myModal')  displayModal;

showSignUpModal()
{
    //let displayModalElem = this.displayModal.nativeElement;
    jQuery(this.displayModal.nativeElement).modal('show');
   // jQuery(displayModalElem).modal('show');
}
}

它工作正常，但我的问题是我是棱角分明的新手，我不明白发生了什么事实上我经历了很多stackoverflow问题youtube教程，人们已经回答了如何实现这个但我无法得到正确的解释为什么会发生这种情况，所以我对代码的查询很少，如果有人解释它将会有所帮助。

1）<div #myModal class="modal" role="dialog">

为什么我们使用“#myModal”而不是id =“myModal”？

2）`// @ ViewChild（'myModal'）displayModal：ElementRef; @ViewChild（'myModal'）displayModal; jQuery的（this.displayModal.nativeElement）.modal（ '节目'）;

我已尝试使用上面的代码，这些代码在@ViewChild中采用ElementRef，如第一行中所示，并且不将其作为第二行，并且它们都工作？这怎么可能？ ElemntRef是可选的?? Angular官方documnet没有解释它。

3）为什么我们使用jquery来显示模态，有没有办法只使用Angular调用它？

Answer 1

嘿，所以这里是你的qeustion的答案..

1）<div #myModal class="modal" role="dialog">

和：所以#myModal这里是你的模板引用变量，使用它我们可以访问DOM属性，例如，要获取DOM属性，就像你想要对话框的角色，你可以像myModal.role一样访问它。类似的你可以用它来获取你想要的id或任何东西。

了解更多内容，您可以访问here：

2）2）`// @ ViewChild（＆＃39; myModal＆＃39;）displayModal：ElementRef; @ViewChild（＆＃39; myModal＆＃39;）displayModal; jQuery的（this.displayModal.nativeElement）.modal（＆＃39;显示＆＃39）;

我已尝试使用上面的代码，这些代码在@ViewChild中采用ElementRef，如第一行中所示，并且不将其作为第二行，并且它们都工作？这怎么可能？ ElemntRef是可选的?? Angular官方文件没有解释它。

ans：如果您需要组件的ElementRef，则无法使用模板变量。如果元素是一个组件，那么您将获得组件实例。模板变量仅返回纯HTML元素的ElementRef。

要获取组件的ElementRef，您需要使用@ViewChild（） @ViewChild('myModal') displayModal:ElementRef ; @ViewChild（＆＃39; myModal＆＃39;）displayModal; 你使用的方式。

3）为什么我们使用jquery来显示模态，有没有办法只使用Angular调用它？

ans：没有更简单的方法。使用ngshow使布尔值为true和false。所以当你想显示模型使其值为true并隐藏false时。基本上显示和隐藏div示例

希望这有助于您理解。

使用角度为4

1 个答案: