在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中

回答

相关问题