有链接点击触发独特的切换按钮吗？

Question

我使用 AngularJS 和 CSS/HTML 来创建这个网页。我有一个书籍链接列表，我循环并为每个链接创建一个新的“卡片”（只是创建一个 div）。作为此循环的一部分，我还创建了一个切换开关，以便每张卡旁边都有一个切换开关。我希望在单击图书链接时打开/为真切换，但现在它似乎只适用于我想要的第一个链接。如果我单击列表中的任何其他链接，切换似乎不起作用。

我基本上已经设置好了，当点击链接时，它会触发 toggleSwitch() 函数来切换按钮。我认为问题在于我编写角度的方式是每次都查找第一个链接，但我不确定如何遍历列表。 （我是网络开发的新手，如果这看起来很愚蠢，请原谅我）

 <span *ngIf="selectedTitles">
                <div *ngFor="let audibleTitle of selectedTitles" class="justify-content-center">
                    <a  class="bookLink" href="link to a book"  (click)="toggleSwitch()" target="_blank">
                        <div class="audible-title card-body">
                            <strong>title name</strong> <br>
                            title author  <strong> | </strong>
                            <!--<span *ngFor="let genre of audibleTitle.genre"> {{genre}} > </span>-->
                                <span>title genre</span>
                        </div>
                    </a>
                    <label class="switch">
                        <input #link type="checkbox" id="sliderButton" >
                        <span class="slider round" ></span>
                    </label>
                </div>
            </span>

export class ContentRecommendationComponent implements OnInit {
  @ViewChild('link') testLink;

  @Input() prometheusResponse: PrometheusResponse;

  selectedTitles: AudibleTitle[] = [];

  constructor() {
  }

  ngOnInit() {
  }
  toggleSwitch(){
    this.testLink.nativeElement.checked = true;
    console.log('this is showing');
  }

}

我希望每个切换都关联到它的正确链接。我想我的问题是如何通过 Angular 中的每个链接进行链接？

Answer 1

一种方法是通过您的toggleSwitch 方法发送link 模板变量，如下所示：

<span *ngIf="selectedTitles">
  <div *ngFor="let audibleTitle of selectedTitles" class="justify-content-center">
    <a  class="bookLink" href="link to a book"  (click)="toggleSwitch(link)" target="_blank">
      <div class="audible-title card-body">
        <strong>title name</strong> <br> title author  <strong> | </strong>
        <!--<span *ngFor="let genre of audibleTitle.genre"> {{genre}} </span>-->
        <span>title genre</span>
      </div>
    </a>
    <label class="switch">
      <input #link type="checkbox" id="sliderButton" >
         <span class="slider round" ></span>
    </label>
  </div>
        </span>

现在你的toggleSwitch 会是这样的：

toggleSwitch(link){
    link.nativeElement.checked = true;
    console.log('this is showing');
  }

这样，在每次迭代中，toggleSwitch 将收到该迭代中的实际链接，并且只会切换该特定开关

Answer 2

我希望每个切换都与它的正确链接相关联。我想我的问题是如何通过 Angular 中的每个链接进行链接？

您需要将循环的迭代器索引传递给切换函数。 *ngFor="let item of items; let i=index" 然后将 i 传递给 toggleswitch(i)。

Answer 3

我不建议为这样的事情访问 HTML nativeElement。您已经有一个基础数据结构，因此您可以向它添加一个checked 属性。您只能检查第一个链接时遇到问题，因为您没有告诉您的 toggleSwitch() 方法您要检查或取消选中哪个audibleTitle。考虑底层数据模型，而不是 HTML 本身。

我还质疑您在也有href 的链接上使用(click) 操作。如果单击该链接两次（从而打开第二个窗口），您将取消设置其checked 属性。值得深思。

在您的 TypeScript 中：

export interface AudibleTitle {
    checked: boolean;
    link: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    audibleTitles: Array<AudibleTitle> = [
        {
            checked: false,
            link: `https://example.com`
        },
        {
            checked: false,
            link: `https://google.com`
        },
    ];


    toggleSwitch(audibleTitle: AudibleTitle) {
        audibleTitle.checked = !audibleTitle.checked;
        console.log('this is showing');
    }
}

    audibleTitles: Array<AudibleTitle> = [
        {
            checked: false,
            link: `https://example.com`
        },
        {
            checked: false,
            link: `https://google.com`
        },
    ];


    toggleSwitch(audibleTitle: AudibleTitle) {
        audibleTitle.checked = !audibleTitle.checked;
        console.log('this is showing');
    }
}

在您的 HTML 中：

<span *ngIf="selectedTitles">
    <div *ngFor="let audibleTitle of selectedTitles" class="justify-content-center">
        <a class="bookLink" href="https://example.com/{{audibleTitle.link}}" (click)="toggleSwitch(audibleTitle)" target="_blank">
            <div class="audible-title card-body">
                <strong>title name</strong> <br>
                title author <strong> | </strong>
                <!--<span *ngFor="let genre of audibleTitle.genre"> {{genre}} > </span>-->
                <span>title genre</span>
            </div>
        </a>
        <label class="switch">
            <input #link type="checkbox" id="sliderButton">
            <span class="slider round"></span>
        </label>
    </div>
</span>