Question

这是我的index.html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="k-grid-filter k-state-active" href="#" tabindex="-1">
     <span class="k-icon k-filter">debugger</span>
</a>

这是我的app.component.ts

<!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>

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

custom.js

<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中包含的jquery和bootstrap样式和脚本。

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

提前致谢

Answer 1

你为什么不直接在Angular中这样做？使用这样的Property Binding：

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

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

method() {
alert('success');
}

app.component.ts内部无法读取按钮功能

1 个答案: