0

这是我的 index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Code Concrete</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
  <button class="btn btn-md btn-primary" id="btn-test">Click this!</button>

</body>
</html>

这是我的 app.component.ts

<app-nav></app-nav>
<div class="container-fluid">
  <section class="content-wrapper">
    <h1>{{title}}</h1>
    <h2>asd</h2>
    <nav>
      <a routerLink="/dashboard">Dashboard</a>
      <a routerLink="/heroes">Heroes</a>
    </nav>
    <button class="btn btn-md btn-primary" id="btn-test">Click this! 
    </button>
    <router-outlet></router-outlet>
    <app-messages></app-messages>
  </section>
</div>

我有一个包含在 angular.json 中的 scipt custom.js（以前是 angular-cli.json）。

自定义.js

$('button#btn-test').on('click',function() {
    alert("success");
});

我还包含在 angular.json 中的 jquery 和 bootstrap 样式和脚本。

该按钮在 index.html 内部时可以工作，但是当我将其转移到 app.component.html 时，它就不再工作了。为什么按钮不起作用？我错过了任何代码行吗？当我已经在 angular.json 中包含我的脚本和样式时，我还需要导入其他任何东西吗？

提前致谢

4

1 回答 1

0

为什么不直接在 Angular 中做呢？使用这样的属性绑定：

<button class="btn btn-md btn-primary" id="btn-test" (click)="method()">Click this! 
</button>

在打字稿文件中执行以下操作：

method() {
alert('success');
}
于 2018-05-08T13:25:04.053 回答