如何突出顯示div或使div被激活點擊

我有幾個div，如果div被點擊，我想通過改變div的背景顏色以及div中的文本來高亮div即使其活躍）。在使用JQuery之前，我通過在css中定義一個類並動態刪除和添加類來完成此操作。這怎麼能在Angular2中完成。從研究和我不應該操縱DOM，因爲這是在angular2中不是沒有。我在網上查了幾個例子，但沒有成功。請如何突出顯示div或使div被激活點擊

來源

2016-08-17 user3497437

強制性的「只使用VanillaJS」的評論。 –

一種方法是製作屬性指令。對你來說幸運的是，Angular擁有a guide幾乎完全符合你的需求，但卻帶有懸停事件。爲了應對點擊相反，對於 '響應用戶操作' 部分...

...替換此：

@HostListener('mouseenter') onMouseEnter() { 
    /* . . . */ 
} 
@HostListener('mouseleave') onMouseLeave() { 
    /* . . . */ 
}

與此：

@HostListener('click') onMouseClick() { 
    /* . . . */ 
}

要acheive結果，其中點擊一個已經突出顯示的div將不會引起注意，完整的指令代碼將爲：

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

@Directive({ 
    selector: '[myHighlight]' 
}) 
export class HighlightDirective { 
    private _defaultColor = 'red'; 
    private el: HTMLElement; 
    private highlighted: boolean = false; 

    constructor(el: ElementRef) { this.el = el.nativeElement; } 

    @Input('myHighlight') highlightColor: string; 

    @HostListener('click') onMouseClick() { 
    this.highlighted ? this.highlight('') : this.highlight(this.highlightColor || this._defaultColor); 
    } 

    private highlight(color: string) { 
    this.el.style.backgroundColor = color; 
    } 
}

對於您SE的指令，將它應用到一個元素，像這樣：

<!-- With default color --> 
<div [myHighlight]>Click to highlight me!</div> 
<!-- With custom color --> 
<div [myHighlight]="yellow">I'm a div, la di da.</div>

來源

2016-08-17 03:49:31 ABabin

但如果我點擊另一個div，以前的div不會不高亮右 – user3497437

但如果你選擇另一個div，先前的div仍然高亮顯示。但是一個div必須被突出顯示，而不是所有的div。 – user3497437

如果您只希望一次突出顯示一個div，則可以在包含highlightable div的組件中進行突出顯示，或者您可以創建一個服務，以使屬性指令的所有實例（在其他情況下都是隔離的）與爲了彼此協調。 – ABabin

只需設置取決於被點擊了哪些項目，並設置一個類，如果值匹配當前項目的一個屬性。使用CSS應用樣式：

@Component({ 
    styles: [` 
    div.highlight { 
     background-color: red; 
    }` 
    ], 
    template: ` 
    <div (click)="highlighted = 1" [class.highlight]="highlighted === 1">div1</div> 
    <div (click)="highlighted = 2" [class.highlight]="highlighted === 2">div2</div> 
    <div (click)="highlighted = 3" [class.highlight]="highlighted === 3">div3</div> 
` 
}) 
class MyComponent { 
    hightlighted:number = 0; 
}

來源

2016-08-17 10:39:07

感謝您的回覆，我對angular2非常陌生，但仍不知道上面做了什麼。就像我上面提到的從做JQuery到試圖學習angular2。在JQuery中這樣做涉及到添加和刪除一個類，但是在angular2中，它與它截然不同，並試圖抓住這個概念。但是如何動態地添加和刪除類似JQuery的類而不操作dom。 – user3497437

我只想當div被點擊時突出顯示讓用戶知道活動div。如果另一個div被點擊，它會突出顯示，並且以前的div不是 – user3497437

我上面的代碼是動態添加/刪除類「highlight」。或者你的意思是「動態」的其他內容？你也可以使用'[ngClass] =「someClass」'，其中'someClass'是一個字符串或數組，並添加類。 –

如何突出顯示div或使div被激活點擊

回答

相關問題