Question

我对角度工作很新，遇到了一个问题！我在一个常见问题页面上做了一个点击事件，我正在以角度5进行。我遇到的问题是，当我点击一个常见问题时，它们都会打开，而不仅仅是目标。

这是我的意思：

public show_content = true;
  showContent () {
    this.show_content = !this.show_content;
  }

和我的HTML：

<h4 class="accordion-toggle" (click)="showContent()">When is the app ready for download?</h4>
      <hr>
            <div class="accordion-content" *ngIf="!show_content">
                <p>
                    Cras malesuada ultrices augue molestie risus.
                </p>
            </div>
      <h4 class="accordion-toggle" (click)="showContent()">When is the app ready for download?</h4>
      <hr>
            <div class="accordion-content" *ngIf="!show_content">
                <p>
                    Cras malesuada ultrices augue molestie risus.
                </p>
            </div>

据我所知，我在两者上都使用相同的* ngIf，这就是为什么会这样。我问的问题是：有没有办法在不为每个常见问题创建多个变量的情况下执行此操作？我得到了这样的新功能：

showContent2 () {
    this.show_content2 = !this.show_content2;

  }

然后在我的html中使用它：

  <h4 class="accordion-toggle" (click)="showContent2()">When is the app ready for download?</h4>
      <hr>
            <div class="accordion-content" *ngIf="!show_content2">

这确实可以解决这个问题但是我想知道是否有更好的方法来做这个，因为这看起来很长。

Answer 1

一种方法是，您可以从将每个faq重构为faq组件开始。这样你可以隔离每一个

/src/app/my-faq/my-faq.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-faq',
  templateUrl: './my-faq.component.html',
  styleUrls: ['./my-faq.component.scss']
})
export class MyFaqComponent {
  @Input() title: string;
  @Input() content: string;
  show_content = false;

  constructor() {}

  showContent() {
    this.show_content = !this.show_content;
  }
}

/src/app/my-faq/my-faq.component.html：

<h4 class="accordion-toggle" (click)="showContent()">{{ title }}</h4> 
<hr>
<div class="accordion-content" *ngIf="!show_content">
  <p>{{ content }}</p>
</div>

/src/app/my-faq/my-faq.component.scss

.accordion-toggle {
  // your css here
}
.accordion-content {
  // your css here
}

在/src/app/app.module.ts中添加：

...
import { MyFaqComponent } from './my-faq/my-faq.component.ts'
...

@NgModule({
  declarations: [
    ...,
    MyFaqComponent
  ]
...

在您的应用中声明组件后，在您的HTML中，现在您可以这样做：

<my-faq [title]="'When is the app ready for download?" [content]="'Cras malesuada ultrices augue molestie risus.'"></my-faq>
<my-faq [title]="'When is the app ready for download?" [content]="'Cras malesuada ultrices augue molestie risus.'"></my-faq>

点击事件发生在所有div上而不是一次一个 - Angular5

1 个答案: