Add to Cart 按钮如下：
找到其实现的 Angular Component： 
实现该按钮的元素：
<button
*ngIf="hasStock"
[ngClass]="
options?.displayAddToCart
? 'btn btn-tertiary'
: 'btn btn-primary btn-block'
"
type="submit"
[disabled]="quantity <= 0 || quantity > maxQuantity"
>
首先，让我们分析这个 Angular Component 的 HTML 源代码的语义。这段代码是一个按钮元素，具有一些 Angular 指令和属性，让我们逐步分析：
-
<button>元素： 这是一个按钮元素，用于触发某种操作，比如提交表单。按钮是用户与应用程序交互的重要部分。 -
*ngIf="hasStock"： 这是 Angular 的结构性指令*ngIf，用于根据条件动态渲染或移除元素。在这里，按钮仅在hasStock变量为真时显示。 -
[ngClass]="..."这是 Angular 的属性绑定，用于动态设置元素的类。类的选择取决于options?.displayAddToCart的值。如果为真，按钮将具有'btn btn-tertiary'类，否则将具有'btn btn-primary btn-block'类。 -
type="submit"： 这是 HTML 按钮的属性，指定按钮的类型。在这里，按钮的类型被设置为 "submit"，这通常用于提交表单。 -
[disabled]="quantity <= 0 || quantity > maxQuantity"： 这是另一个属性绑定，用于动态设置按钮的禁用状态。按钮将在quantity小于等于 0 或大于maxQuantity时被禁用。
现在，让我们通过示例进一步说明这些概念：
假设在组件的 TypeScript 代码中有以下定义：
// 组件类
export class MyComponent {
hasStock: boolean = true;
options: { displayAddToCart: boolean } = { displayAddToCart: true };
quantity: number = 5;
maxQuantity: number = 10;
}
在这个例子中，按钮会显示，因为 hasStock 是真值。根据 options?.displayAddToCart 的值，按钮的类将是 'btn btn-tertiary'。按钮不会被禁用，因为 quantity 大于 0 且小于等于 maxQuantity。
如果我们将 hasStock 设置为 false，按钮将不会显示。如果 options.displayAddToCart 为 false，按钮将有类 'btn btn-primary btn-block'。如果 quantity 设置为 0 或大于 maxQuantity，按钮将被禁用。
这个组件的HTML代码是一个具有条件渲染、动态类绑定和动态禁用状态的按钮，这使得按钮的外观和交互能够根据组件状态进行动态调整。
form submit 绑定了一个事件处理函数：
创建 UI Event，便于监听这个事件的实现者弹出对话框：
监听者显示 Model Dialog：
protected openModal(event: CartUiEventAddToCart): void {
const addToCartData = {
productCode: event.productCode,
quantity: event.quantity,
numberOfEntriesBeforeAdd: event.numberOfEntriesBeforeAdd,
pickupStoreName: event.pickupStoreName,
};
const dialog = this.launchDialogService.openDialog(
LAUNCH_CALLER.ADDED_TO_CART,
undefined,
undefined,
addToCartData
);
if (dialog) {
dialog.pipe(take(1)).subscribe();
}
}
这是 Modal Dialog 的实现 Component：AddedToCartDialogComponent
动态创建该 Component 的实例。 
tabindex = -1 
focus config 是硬编码的 Json 对象：
如果设置成空对象，就可以双击选中了。
Autofocus 设置为 button，这样对话框打开之后，直接敲击回车就能执行添加购物车的操作了。
注释掉之后，又可以重新选中文字了。