以下是一个Angular 6应用程序中的示例代码,它在点击项目时切换类,并切换其他项目的类:
在app.component.html文件中,添加以下代码:
{{ project.name }}
在app.component.ts文件中,添加以下代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
projects = [
{ name: 'Project 1', active: false },
{ name: 'Project 2', active: false },
{ name: 'Project 3', active: false }
];
toggleClass(project) {
// 切换当前项目的active属性
project.active = !project.active;
// 切换其他项目的active属性
this.projects.forEach(p => {
if (p !== project) {
p.active = false;
}
});
}
}
在app.component.css文件中,添加以下代码:
.active {
background-color: yellow;
}
这段代码会在每个项目上添加一个点击事件监听器,当项目被点击时,会调用toggleClass方法。toggleClass方法切换当前项目的active属性,并将其他项目的active属性设置为false。在HTML模板中,使用[class.active]指令来动态添加或移除active类,从而改变项目的样式。