我正在尝试在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 '$'.
有什么不对劲吗?请建议我。
答案 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一起使用
答案 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'导入*为$;