Angular2输出/ emit()不起作用

时间:2016-08-18 20:50:08

标签: javascript angular typescript angular2-directives

对于我的生活,我无法弄清楚为什么我不能发射或捕获一些数据。 toggleNavigation()会引发攻击,但我不确定.emit()是否真的有效。

最终我想折叠并展开导航,但目前我只想了解如何将数据从navigation.component发送到app.component

Here is a Plunker link

app.component

import { Component } from '@angular/core';
import { PasNavigationComponent } from './shared/index';

@Component({
    moduleId: module.id,
    selector: 'pas-app',
    template: `
          <pas-navigation 
            (toggle)="toggleNavigation($event);">
          </pas-navigation>

          <section id="pas-wrapper">
              <pas-dashboard></pas-dashboard>
          </section>              
    `,
    directives: [PasNavigationComponent]
})

export class AppComponent {
    toggleNavigation(data) {
    console.log('event', data);
    }
}

PAS-navigation.component

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'pas-navigation',
    template: `
        <nav>
            <div class="navigation-header">
                <i class="fa fa-bars" (click)="toggleNavigation()"></i>
            </div>
        </nav>
    `
    })

export class PasNavigationComponent {

    @Output('toggle') navToggle = new EventEmitter();

    toggleNavigation() {  
        this.navToggle.emit('my data to emit');
    }
}

修改

我添加了Pankaj Parkar的建议。

1 个答案:

答案 0 :(得分:8)

您只需要在方法上指定attr_accessor参数,因此无论在class countries { public $countries = array("Afghanistan","Hong Kong","Moldova","Malawi"); public function getCountries() { return $countries; } } 输出值上发出什么,该数据都将在AppComponent require_once('/lbs/countries.php'); $country = new countries(); print_r($country->{getCountries()}); toggleNavigation $event $ event中可用。参数。

navToggle

<强> AppComponent

's

Forked Plunkr