Question

我使用的代码与此几乎相同，因此当我点击导航中的某个链接时，它会突出显示：

import {Component} from '@angular/core';
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div class="content-wrapper">
      <p [class.active]="isParaActive">This is a paragraph tag text</p>
      <button [class.active]="isBtnActive" (click)="toggleClass()">Click Me</button>
    </div>
  `,
  styles: [
  `
  p{
    color: red;
  }
  p.active{
    color: green;
  }
  button{
    background-color: #00BCD4;
    color : #ffffff;
  }
  button.active{
    box-shadow:0px 0px 3px 3px rgba(0,0,0,0.4);
  }
  `
  ]
})
export class App {
  constructor() {
  }
  isParaActive:boolean = false;
  isBtnActive:boolean = false;

  //ToggleClass function functionality
  toggleClass(){
      this.isParaActive = !this.isParaActive;
      this.isBtnActive = !this.isBtnActive;
  }
}

但是，现在我希望这样，每当用户点击页面上的任何其他位置时，无论是其他链接还是其他任何链接，该链接都不再突出显示，并且它的类不活动。有谁知道如何实现这一目标？

Answer 1

设置一个属性，该属性保留活动元素id，并在生成外部单击时重置它。您需要一个指令来检查这些点击。

以下是一个例子：

<强> HTML

<div style="width:0" (clickOutside)="active = -1">

    <ul>
      <li *ngFor = "let person of persons; let i = index; let even = even" (click)="active = i" [ngStyle]="{'background-color': active === i ? 'red' : even ? 'yellow' : 'blue'}">
        {{person.name}}
      </li>
    </ul>

</div>

组件类：

active = -1;

<强>指令：

Directive
import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {

    @Output()
    clickOutside = new EventEmitter<Event>();

    constructor(private elementRef: ElementRef) {
    }

    @HostListener('document:click', ['$event', '$event.target'])
    onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(event);
        }
    }
}

DEMO

Answer 2

我个人会为导航栏创建一个组件，因为我希望尽可能保持app组件的清洁。

如果我理解正确，只要点击导航栏，您就会尝试删除该课程。

如果您要将此功能封装在组件中，则可以在navigation组件中执行以下操作。

constructor(el: ElementRef) { }



@HostListener('document:click', ['$event']) docClick( event: MouseEvent ) {
    if( !this.el.nativeElement.contains(event.target) ) {
       // Clicked outside   
    }
}

在Angular 2

2 个答案: