我正在使用 stackblitz 处理 angular 文档,并且到目前为止它让我创建的两个 window.alert 都不起作用。第一个是“共享”按钮,实际上只是我将它添加到 HTML 中,但是当我单击共享按钮时警报不起作用。有关故障排除的任何提示?
这是组件:
import { Component } from '@angular/core';
import { products } from '../products';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
products = products;
share() {
window.alert('The product has been shared!');
}
onNotify() {
window.alert('You will be notified when the product goes on sale');
}
}
这是html:
<h2>Products</h2>
<div *ngFor="let product of products">
<h3>
<a [title]="product.name + ' details'">
{{ product.name }}
</a>
</h3>
<p *ngIf="product.description">
Description: {{ product.description }}
</p>
<button (click)="share()">
Share
</button>
<app-product-alerts [product]="product" (notify)="onNotify()">
</app-product-alerts>
</div>
答案 0 :(得分:1)
一个不同的源子框架试图创建一个 JavaScript 对话框。这不再被允许并被阻止。有关详情,请参阅 https://www.chromestatus.com/feature/5148698084376576。
尝试使用其他浏览器(例如 Edge),您应该会看到它可以正常工作。话虽如此,我建议在本地开发和运行(我最初的回答假设您正在这样做),以避免在 stackblitz 中工作时可能出现的任何其他“问题”。请参阅下面我的原始答案,使其在您的机器上编译/运行。
tsconfig.json
复制到tsconfig.app.json
npm i -D @angular/cli@12.0.5 @angular/compiler-cli@12.0.5 typescript@4.2
一旦我这样做并运行 npm start
,警报就起作用了。
答案 1 :(得分:0)
你是否只尝试过 alert() 方法,尽管 window.alert() 也应该可以工作。 typescript 库也为我们提供了一个 alert() 方法。 此外,如果您可以提供指向您的代码片段的 stackblitz 链接,我们可以让您了解更多有关您的代码无法正常工作的信息。
同时,下面是显示 window.alert() 和 alert() 都在 angular 中工作的链接。