座位地图飞机预订使用角度

Question

我需要帮助。座椅应该改变颜色(增加，删除类(。我不知道怎么做。这是我使用JS的解决方案https://codepen.io/mateuszcieslik/pen/mdpLqgw我有一个关于飞机的部件。

我在寻求一些建议或解决方案。我是Angular和It的新手。我已经在谷歌上搜索过了，找不到有用的话题。

代码如下：

<li class="row row--1">
<ol class="seats" type="A">
<li class="seat">
<input type="checkbox" class="oneSeat" id="1A" />
<label for="1A">1A</label>
</li>
<li class="seat">
<input type="checkbox" class="oneSeat" id="1B" />
<label for="1B">1B</label>
<li class="seat">
<input type="checkbox" class="oneSeat" id="1C" />
<label for="1C">1C</label>
</li>
<li class="seat">
<input type="checkbox" class="oneSeat" id="1D" />
<label for="1D">1D</label>
</li>
</ol>
</li>

和Embrarer.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-embraer',
templateUrl: './embraer.component.html',
styleUrls: ['./embraer.component.scss']
})
export class EmbraerComponent implements OnInit {
title__seatList: string = 'Wybór Miejsca'
nextButton: string = 'Next';
reservationButton: string = 'Reservation';
dataSource:any = [];
constructor() { }
ngOnInit(): void {
}
onAddSeat(){
this.dataSource.push(this.dataSource.length);
}
}

Answer 1

我认为有很多方法可以解决添加/删除CSS类的问题。

NgClass(IMO是最简单的方法(

您可以创建一个表示座椅的组件，定义ngClass，然后单击事件处理程序，然后像这样切换类：

seat.com组件.ts

@Component({
selector: 'app-seat',
templateUrl: './seat.component.html',
styleUrls: ['./seat.component.css']
})
export class SeatComponent {
public isSelected: boolean = false;
@Input() id: string;
public handleClick($event: MouseEvent): void {
this.isSelected = !this.isSelected;
}
}

seat.com.ponent.html

<div class="seat" [ngClass]="{'selected': isSelected}" 
[id]="id" (click)="handleClick($event)"
>
{{id}}
</div>

seat.com.ponent.css

.seat {
// details for seat styling
}
.seat .selected {
// style change for when selected
}

它会改变你在主模板中使用它的方式，比如这个

airplane.component.html

<li class="row row--1">
<ol class="seats" type="A">
<li class="seat">
<app-seat [id]="1A"></app-seat>
</li>
<li class="seat">
<app-seat [id]="1B"></app-seat>
<li class="seat">
<app-seat [id]="1C"></app-seat>
</li>
<li class="seat">
<app-seat [id]="1D"></app-seat>
</li>
</ol>
</li>

渲染器2

您可以注入对Renderer2的引用，并在其上调用方法来修改本机元素引用上的类。

请参阅https://www.tektutorialshub.com/angular/renderer2-angular/

类似

class SeatComponent {
private selected: boolean = false;
constructor(private renderer: Renderer2, private el: ElementRef) {
}
clickHandler($event: MouseEvent): void {
this.selected = !this.selected;
if (this.selected) {
this.renderer.addClass(this.el.nativeElement, 'selected');
} else {
this.renderer.removeClass(this.el.nativeElement, 'selected');
}
}
}

本机DOM操作

您可以注入ElementRef(这将为您提供对组件的ElementRef的引用(。它看起来像这样(老实说，我对这里的语法不太肯定(：

class SeatComponent {
constructor(private el: ElementRef) {
}
clickHandler($event: MouseEvent): void {
if (this.el.nativeElement.styleClasses.selected) {
this.el.nativeElement.styleClasses.push('selected');
} else {
delete this.el.nativeElement.styleClasses.selected;
}
}
}

Answer 2

感谢您的帮助。我是按照第一种方法做的。我创建了座椅组件。和我在主模块.ts 中导入和导出了座椅组件

我在html飞机中有错误，例如

"分析程序错误：[1A]中第2列的意外标记"A"；

VSC突出显示id和1A

<li class="seat">
<app-seat [id]="1A"></app-seat>
</li>

在主模块I导入和导出座椅组件