我尝试通过一些在线课程学习角度。当我尝试使用 Alertify 时,我收到一条错误消息:“alertify 未在 ProductComponent.addToCart 中定义”。我在下面分享相关代码;
angular.json
(我试图将路径更改为“../node_modules..”所以开始双点但没有修复它。)
"styles": [
"src/styles.css",
"./node_modules/alertifyjs/build/css/alertify.min.css",
"./node_modules/alertifyjs/build/css/themes/bootstrap.min.css"
],
"scripts": [
"./node_modules/alertifyjs/build/alertify.min.js"
]
还尝试使用 styles.css 文件导入;
@import "~alertifyjs\build\css\alertify.min.css";
@import "~alertifyjs\build\css\themes\bootstrap.min.css"
组件.ts;
import { Product } from './product';
declare let alertify: any;
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor() { }
title ="Ürün Listesi";
filterText="";
products : Product[] = [
{id:1, name:"Laptop", price:2500, categoryId:1, description:"Asus ZenBook",imageUrl:"https://images.unsplash.com/photo-1588702547923-7093a6c3ba33?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
{id:2, name:"Mouse", price:300, categoryId:2, description:"Logitech G502",imageUrl:"https://images.unsplash.com/photo-1588440241012-ffd0331a05a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZzUwMnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"},
{id:3, name:"Klavye", price:1100, categoryId:2, description:"Razer Kraken Klavye",imageUrl:"https://images.unsplash.com/photo-1563191911-e65f8655ebf9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
{id:1, name:"Laptop", price:2500, categoryId:1, description:"Asus ZenBook",imageUrl:"https://images.unsplash.com/photo-1588702547923-7093a6c3ba33?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
{id:2, name:"Mouse", price:300, categoryId:2, description:"Logitech G502",imageUrl:"https://images.unsplash.com/photo-1588440241012-ffd0331a05a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZzUwMnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"},
{id:3, name:"Klavye", price:1100, categoryId:2, description:"Razer Kraken Klavye",imageUrl:"https://images.unsplash.com/photo-1563191911-e65f8655ebf9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
{id:1, name:"Laptop", price:2500, categoryId:1, description:"Asus ZenBook",imageUrl:"https://images.unsplash.com/photo-1588702547923-7093a6c3ba33?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
{id:2, name:"Mouse", price:300, categoryId:2, description:"Logitech G502",imageUrl:"https://images.unsplash.com/photo-1588440241012-ffd0331a05a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZzUwMnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"},
{id:3, name:"Klavye", price:1100, categoryId:2, description:"Razer Kraken Klavye",imageUrl:"https://images.unsplash.com/photo-1563191911-e65f8655ebf9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
{id:5, name:"Klavye", price:1100, categoryId:2, description:"Razer Kraken Klavye",imageUrl:"https://images.unsplash.com/photo-1563191911-e65f8655ebf9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"},
];
ngOnInit(): void {
};
addToCart(product:any){
alertify.success('Başarıyla eklendi.');
component.html
;
<a (click)="addToCart(product)" class="btn btn-primary action"
>Sepete ekle</a
>
这个 AddCart 函数可以在不使用 alertify 的情况下正常工作(例如简单的 alert("Added") 工作正常)。
我检查了 Alertifyjs 所在的路径,并且所有必需的文件都存在于其中。