内部javascript在angular2中不起作用 [英] internal javascript not works in angular2

问题描述

我正在尝试在angular2中加载内部javascript. 当我点击标签时，什么也没有发生. 这是我的代码.

I am trying to load internal javascript in angular2. When i click on lable nothing happens. Here is my code.

      <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");
 }
}

现在，在控制台中，我收到此错误.

Now, in console i am getting this error.

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

有什么问题吗?请建议我.

Is there any thing wrong. Please suggest me.

推荐答案

我认为您正在尝试在组件模板中添加javascript代码.这不是正确的方法.取而代之的是，尝试使用Angular2这样的方式进行此操作:

I think you are trying to add javascript code inside component templates. This is not correct way to do it. Instead of it, try to do this using Angular2 way like this :

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

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

ElementRef类是DOM中组件本身的引用.这样我们就可以将搜索过滤到该组件.

The ElementRef class is a reference for the component itself in the DOM. So we're able to filter the search to this component.

这篇关于内部javascript在angular2中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！