在Angular 2中將點擊事件包裝到* ngIf中

當使用Angular 2的屏幕尺寸小於768像素寬度時，僅使用（單擊）的最佳方式是什麼？我有（click）=「isClassVisible = ！isClassVisible;」但想把它放在類似 * ngIf =「screenWidth < 769 {（click）=」isClassVisible =！isClassVisible;「}」。不知道如何在Angular 2中做到這一點。我知道這是無效的。基本上，具有輔助下拉菜單的導航項應當在桌面上懸停時展開，並在鼠標離開時收縮。在移動設備上，我希望他們點擊導航條打開，但如果再次點擊，也可以關閉它。我可以做到這一點，但我無法弄清楚如何在響應模式下使點擊事件可見。在Angular 2中將點擊事件包裝到* ngIf中

來源

2017-04-14 FoffySkrimshaw

你真的有兩種方法：

1）創建2個獨立的元素，一個與click事件和一個沒有。然後爲每個元素添加特定的媒體查詢啓用類，其中一個隱藏，當屏幕爲< 768px，另一個隱藏時屏幕> 768px

2）onclick事件在控制器中調用一個函數而不是直接在ng-click表達式中設置值。在你的控制器中的這個函數中，你可以使用諸如（window.innerWidth）之類的東西來檢查窗口對象的屏幕大小。這有時會變得棘手，所以你必須做很多測試。

我會誠實地使用第一種方法，即使技術上在標記中重複它只是更容易遵循。

來源

2017-04-14 18:49:42 Sasang

第一種方法也是我的第一種方法，只是看到在Angular 2中是否有其他方法 – FoffySkrimshaw

@Component({ 
    selector: 'clicable' 
    , template: ` 
     <div [clickIf]="clickIf" (value)="val = $event">click on me</div> 
     Width: <input [(ngModel)]="width"> 
     value: 
     <div>{{val}}</div> 
    ` 
    }) 
    export class ClickableComponent { 
    clickIf 
    width = 200; 

    constructor() { 
     this.clickIf = obs => obs.filter(value => this.width > 100); 
    } 

    setWidth(width: number) { 
     this.width = +width; 
    } 
    } 

    let id = 0; 

    @Directive({ 
    selector: '[clickIf]' 
    }) 
    export class ClickIfDirective { 
    @Input() clickIf; 
    @Output() value = new EventEmitter(); 

    @HostListener('click') click() { 
     Observable.of(1).let(this.clickIf).subscribe(val => this.value.next(id++)); 
    } 
    }

來源

2017-04-14 20:06:12

在Angular 2中將點擊事件包裝到* ngIf中

回答

相關問題