代码之家 › 专栏 › 技术社区 › moh

尝试在angular 5中将用户登录显示为模态

angular5 angular

1

moh · 技术社区 · 8 年前

我想在主页中将登录组件html文件显示为模式:

我有如下组件:

app-â©
  components-â©
    about
    dashboard-â© admin
    footer      user
    home        useruser
    login
    navbar

这是我的应用程序。组件。html

<app-navbar>

</app-navbar>
<app-home></app-home>

  <router-outlet></router-outlet>


<app-footer></app-footer>

这是我的导航栏。html相关代码

<ul [hidden]="isAuthenticated()" class="right hide-on-med-and-down">
  <li>
    <a class="waves-effect btn-flat" href="#">sign up</a>
  </li>
  <li>
    <a class="waves-effect btn-flat" href="#" id="login">login</a>
  </li>
</ul>

这是登录组件所在的模式:

  <div id="modal1" class="modal">
    <div class="modal-content">
       <app-login></app-login>
    </div>
  </div>

还有js文件,可以为我打开modal

$(document).ready(function () {
  $('#login').click(function () {
      $('#modal1').show('open')
  })
});

如果我把模态代码放在navbar html文件中,我想知道模态代码应该放在哪里才能让这个模态正常工作。。如果我单击登录按钮,模态将显示在某个组件后面

2 回复 | 直到 8 年前

1

0

filipbarak 8 年前

尝试查看角度材质模式

npm install --save @angular/material @angular/cdk

https://material.angular.io/components/dialog/examples

尝试查看NGB模式

npm install --save @ng-bootstrap/ng-bootstrap

https://ng-bootstrap.github.io/#/components/modal/examples

然后您可以创建一个新组件,并将模式视图和代码分别放入该组件的HTML和TS文件中,然后在 openModal() 作用

这两个链接上都有关于如何实现模态的大量指南,既可以作为单独的组件,也可以作为navbar html中的内联模态。

2

0

supernova 8 年前

你说的“模态代码”是什么意思?如果您询问jQuery代码的放置位置,我假设您需要单击导航栏中的登录按钮,然后会出现登录模式。在这种情况下,在登录按钮上写一个click事件,

 <a class="waves-effect btn-flat" href="#" id="login" (click)="openModal()">login</a>

在导航栏的组件中,添加

declare var $: any;

就在进口声明下面。然后在component类中,在openModal()中编写jquery代码,如下所示:

openModal(){
    $('#modal1').show('open');
}

确保在html中包含jquery脚本。