Question

Visual Studio 2017有一个带有Angular项目模板的ASP.NET Core。我创建了它，它有一个计数器样本。代码很简单。

counter.component.html

<p>Current count: <strong>{{ currentCount }}</strong></p>

<button (click)="incrementCounter()">Increment</button>

counter.component.ts

export class CounterComponent {
    public currentCount = 0;

    public incrementCounter() {
        this.currentCount++;
    }
}

在浏览器中，它看起来像，

<p>Current count: <strong>0</strong></p>

<button>Increment</button>
</counter>
        </div>
    </div>
</div>
</app></body></html></app>

<script src="/dist/vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I"></script>



    <script src="/dist/main-client.js?v=cH2S4H872p2E0HNFomc0vsA3ykslPAJyz8CIv7STiuY"></script>

</body>

我点了一个带有神秘名字的剧本，但是很长很难读。

我想我可以使用JavaScript手工创建那种简单的计数器，但是，我可能会设置显示元素的ID，在按钮的onClick事件中称为函数，然后是点击，我会更改元素的innerText。但生成的代码没有，并且仍然有效。单击“增量”按钮时，数字如何变化？

我可以在点击增量按钮时设置一个断点并在Chrome中按照步骤进行操作吗？

Answer 1

首先需要了解一些基本的Angular / Javascript概念。

角度数据绑定 - https://angular.io/guide/architecture

是的，您可以编写Javascript来将组件对象中的值与模板中的值同步。但Angular的一个主要原因是你不必这样做。目标是将视图与对象模型分开，让Angular处理这个问题。

捆绑 - https://www.sitepoint.com/javascript-modules-bundling-transpiling/

/dist/vendor.js中的代码是经过编译和捆绑的代码。它最初是用Typescript编写的。它被转换为Javascript，然后将所有Javascript文件合并为一个。

调试和来源地图 - https://medium.com/@ttemplier/how-to-debug-the-typescript-source-code-of-angular2-99a593e2983f

如果您愿意，可以在增量语句中设置断点并逐步完成Angular源。但首先你需要为Angular下载未经过编译的Typescript代码，并生成将原始Typescript映射到输出Javascript的源映射。

该事件如何与Angular中的按钮绑定？

1 个答案: