クリックイベントを角度2の* ngIfにラップする

Question

画面サイズがAngular 2を使用して768ピクセル幅未満の場合にのみ使用（クリック）する最良の方法は何ですか？ （クリック）= "isClassVisible = ！isClassVisible; " が好きですが、 * ngIf = "screenWidth < 769のようにしてください。{（クリック）=" isClassVisible =！isClassVisible; "}" 角度2でこれを行う方法がわかりません。有効ではないことが分かります。基本的に、セカンダリドロップダウンを持つnavアイテムは、デスクトップ上でホバリング時に展開し、マウスが離れると縮小します。モバイルでは、ナビゲーションアイテムをクリックして開くことができますが、再びクリックすると閉じることができます。私はそれを行うことができますが、私はどのようにクリックイベントを応答モードで見えるようにするかを理解できません。

Answer 1

あなたは実際には2つのアプローチがあります。

1）2つの別々の要素は、クリックイベントに1つずつなしを作成します。次に、特定のメディアクエリを有効にしたクラスを各要素に追加します。画面が< 768pxのときに非表示になり、もう1つは非表示になります。画面が768px

2）onclickイベントでは、 ng-click式の値を設定します。あなたのコントローラのこの関数では、（window.innerWidth）のようなものを使ってウィンドウオブジェクトから画面サイズを確認するようなことができます。これは時々面倒なことがあるので、たくさんのテストをしなければなりません。

技術的にはマークアップの繰り返しがありますが、そのほうが簡単です。

Answer 2

@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++)); 
    } 
    }