Question

是否可以为按钮进行多项选择，例如复选框，您可以选择多个选项。在我的情况下，我想要选择两个按钮然后使用所选按钮中的ID并将其信息传输到另一个页面。关于如何做到这一点的任何见解或解决方案都非常感谢。下面是我想要拥有的功能的图像。在下一页上它将显示所选标题的名称，如＆＃34;测试和模拟指标＆＃34;我想这并不重要。我假设路由/网址中都包含两个ID号。 http://localhost:4200/compare/1&3的效果。以下是我的程序的片段，其中包括我的html文件，.ts文件和app-routing.module.ts

＆＃13;

import { Component, OnInit } from '@angular/core';
import { Domain } from '../library';
import { DOMAIN } from '../domain-names';


@Component({
  selector: 'app-compare',
  templateUrl: './compare.component.html',
  styleUrls: ['./compare.component.css']
})
export class CompareComponent implements OnInit {


  domain = DOMAIN;

  selectedDomain: Domain;

  onSelect(dom: Domain): void {
    this.selectedDomain = dom;
  }



  constructor( ) {
  }


  ngOnInit() {

  }

}

＆＃13;

ul {
   padding: 0;
   width: 1200px;
   margin: 20px auto;
 }

li{
   display: inline;
}

h2{
  text-align: center;
}

.btn-info{
  margin: 6px;
}

.button-row{
  margin: auto;;
}

.btn-outline-light {
    padding: 6px;
    border: 4px solid #eee;
    box-shadow: #555 1px 1px 8px 1px;
    height: 160px;
    width: 200px;
    color: black;
}

＆＃13;

<h2> Visualized Metrics By Domain </h2>
<div class="button-row">
  <ul id="thumbnailslist">
    <li *ngFor="let dom of domain" (click)="onSelect(dom)">
      <a routerLink="/domain/{{dom.id}}">
        <button type="button" class="btn-outline-light">{{dom.catergory}}</button>
      </a>
    </li>
  </ul>
</div>

＆＃13;

import { NgModule }  from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CompareComponent } from './compare/compare.component';
import {  DomainCompareComponent } from './domaincompare/domaincompare.component';



const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
 
  { path: 'compare', component: CompareComponent },
  { path: 'compare/:id', component: DomainCompareComponent}

];

@NgModule({
  imports: [ RouterModule.forRoot(routes
  ) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

＆＃13;

Answer 1

不要使用按钮，因为您可能不想立即采取行动。而且无论如何它们都很难打造。

<li *ngFor="let dom of domain" (click)="onSelect(dom)">
    <div [style.background-color]="isSelected(domain) ? 'red' : 'white'" (click)="toggleDomain(domain)"></div>
</li>

在组件中：

selectedDomains: Domain[];

toggleDomain(domain: Domain) {
    if(this.selectedDomains.includes(domain)) {
        this.selectedDomains.splice(this.selectedDomains.indexOf(domain), 1);
    } else {
        this.selectedDomains.push(domain);
    }
}

isSelected(domain: Domain) {
    return this.selectedDomains.includes(domain);
}

然后您有一系列选定的域，您可以轻松地将其发送到其他组件。

下一页组件可能需要接收数据作为输入：

<next-page-selector [domains]="domains"></next-page-selector>

@Input() domains: Domain[];

因此，您可以显示所选的组件名称。下一个组件模板：

<span *ngFor="let domain of domains">{{domain.name}}</span>

按钮选择：角度

1 个答案: