1

Material 2 sidenavを使用し#rightNavて、子コンポーネントテンプレートのクリックイベントから、親コンポーネントテンプレートでローカル参照をトリガーする方法を考え出そうとしています。注釈を使用する必要があると思いますが、方法がわかりません。(click)="rightNav.open()"@ViewChild

子コンポーネント テンプレート (app-conditions-list):

<div *ngFor="let condition of conditions" [class.selected]="condition === selectedCondition"
            (click)="rightNav.open()"></div>

親コンポーネント テンプレート (条件コンポーネント):

import { Component} from '@angular/core';
import { ConditionsListComponent } from './listComponent/conditions-list.component';


@Component({
    moduleId: module.id,
    selector: 'app-conditions',
    template: `
            <md-sidenav #rightNav align="end" mode="side">
            "Condition details will open here on click event"
            </md-sidenav>
            <app-conditions-list></app-conditions-list>`,
    styleUrls: ['./conditions.component.css'],
    directives: [
        ConditionsListComponent,
    ]
})

export class ConditionsComponent  {
    title = "Conditions Manager"
}

子コンポーネントは、親コンポーネント テンプレートにネストされています。ありがとう！

4

2 に答える 2

1

子コンポーネントに出力を追加して、そこからイベントをリッスンできます

export class ConditionsListComponent {
  @Output() navOpen:EventEmitter = new EventEmitter();
}

テンプレート変数を使用して、次のような兄弟要素を参照できます。

<div #rightNav align="end" mode="side" (close)="close($event)"</div>
<app-conditions-list (navOpen)="rightNav.open()"></app-conditions-list>`,

そしてイベントのようなイベント

<div *ngFor="let condition of conditions" [class.selected]="condition === selectedCondition"
        (click)="navOpen.next(null)"></div>
于 2016-07-24T11:02:19.597 に答える
1

イベントを子から親にバブルアップする必要があります。

The child :  

export class ConditionsListComponent  {
   @Output('myEvent') myEvent = new EventEmitter();

   private bubbleUp($event:Event){

     myEvent.emit($event)
  }
}

それはビューです：

  <div *ngFor="let condition of conditions" [class.selected]="condition === selectedCondition"
        (click)="bubbleUp($event)"></div>

そして親：

     import { Component} from '@angular/core';

@Component({
moduleId: module.id,
selector: 'app-conditions',
template: `
        <div #rightNav align="end" mode="side" (close)="close($event)"</div>
        <app-conditions-list (myEvent)='gotTheEvent($event)' ></app-conditions-list>`,
styleUrls: ['./conditions.component.css'],
providers: [],
directives: [
    ConditionsListComponent,
]
})

export class ConditionsComponent  {
   title = "Conditions Manager";

   gotTheEvent($event){

     console.log('I got this event from my child',$event);

    //you can do whatever you want : 

     rightNav.open()
  }
}
于 2016-07-24T11:03:42.243 に答える