内部javascript在angular2中不起作用

时间:2016-09-27 06:02:24

标签: angular

我正在尝试在angular2中加载内部javascript。 当我点击标签时没有任何反应。 这是我的代码。     

      <div class="login-page" style="margin-top:12%">

      <div class="form" id="login">

        <form class="register-form">
          <h3 style="display:inline-block"><span class="glyphicon glyphicon-log-in" ></span></h3> <h1  style="display:inline-block">Sign Up</h1>
          <input type="text" placeholder="first name"/>
          <input type="text" placeholder="last name"/>
          <input type="text" placeholder="email address"/>
          <input type="password" placeholder="password"/>
          <input type="text" placeholder="mobile"/>
          <button>create</button>
          <p class="message" (click)="clicked($event)">Already registered? <a href="#">Sign In</a></p>

        </form>
        <form class="login-form">
          <h3 style="display:inline-block"><span class="glyphicon glyphicon-log-in" ></span></h3> <h1  style="display:inline-block">Login</h1>
          <input type="text" placeholder="username"/>
          <input type="password" placeholder="password"/>
          <button>login</button>

          <p class="message" (click)="clicked($event)">Not registered? <a href="#" class="message">Create an account</a></p>
        </form>
      </div>
    </div>

 import {Component} from '@angular/core';

 @Component({
  selector: 'home',
  styleUrls: ['./home.css'],
  templateUrl: './home.html'
 })
 export class Home {
 clicked(event) {
  $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
 }
}

现在,在控制台中我收到此错误。

 [default] /var/www/ap/angular2-seed-master/src/app/home/home.ts:10:3 
 Cannot find name '$'.

有什么不对劲吗?请建议我。

5 个答案:

答案 0 :(得分:1)

组件模板中的脚本标签只是在不另行通知的情况下被清除。

您需要使用其他机制(如require())向组件添加脚本或直接将其添加到index.html

答案 1 :(得分:1)

我认为您正在尝试在组件模板中添加javascript代码。这不是正确的方法。而不是尝试使用Angular2这样做:

import { ElementRef } from '@angular/core';
...
constructor(private elementRef : ElementRef) {
}

ngAfterViewInit() {
    jQuery(this.elementRef.nativeElement).find('message').on('click', () => {
    //do something here
    });
}

ElementRef类是DOM中组件本身的引用。因此,我们可以将搜索过滤到此组件。

答案 2 :(得分:0)

在p标签上添加点击事件。的onclick =&#34; animateForm()&#34;

在index.html文件中添加函数

<script type="text/javascript">
  function animateForm() {
    alert("click");
      $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
}

</script>

答案 3 :(得分:0)

请记住这是TypeScript而不是JavaScript。 你有没有在你的打字中添加Jquery类型定义文件?

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/jquery.d.ts

或者你可以参考这个问题。关于如何将Jquery与Angular 2一起使用

How to use jQuery with Angular2?

答案 4 :(得分:0)

老兄,我已经尝试了一切并且失败了。 但我会为你分享我的解决方案:

将jquery代码放在导出类之外。像这样:

import {Component} from '@angular/core';
**import * as $ from 'jquery';** //THis is Important

@Component({
  selector: 'home',
  styleUrls: ['./home.css'],
  templateUrl: './home.html'
 })
 export class Home {
}


 clicked(event) {
  $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
 }

永远记得添加:     从'jquery'导入*为$;