angular2中的输入和输出

我正在创建一个angular2应用程序。我有一个子组件（MountainListComponent），它由包含在父组件中的其他组件组成（但这并不重要）。 在子组件中，我有一个山的列表（

），当我单击山时，我希望将布尔变量（

hidelist

）传递给父组件

这两个组件的代码如下所示。 我已经删除了样板代码

父组件：

import {Component, Input} from "angular2/core";
import {MountainListComponent} from "./mountain-list.component";

@Component({
    selector: 'my-mountains',
    template: `hidelist value: {{hidelist}}
        <div class="row spacing" (childChanged)="hidelist=$event" *ngIf="!hidelist">
            <my-mountain-list></my-mountain-list>
        </div>
    `
})

export class MountainsComponent {
    hidelist = false;
}

import {Component, Output, EventEmitter} from "angular2/core";
import {MountainComponent} from "./mountain.component";
import {Mountain} from "./mountain";

@Component({
    selector: 'my-mountain-list',
    template: `
        <section class="col-md-12">
            <my-mountain class="col-md-4" *ngFor="#mountain of mountains" [mountain]="mountain" (click)="onChange()"></my-mountain>     
        </section>
    `,
    directives: [MountainComponent],
    outputs: ['childChanged']
})

export class MountainListComponent implements OnInit {
    childChanged = new EventEmitter<boolean>();

    onChange() {
        var hidelist: boolean;
        hidelist = true;
        this.childChanged.emit(hidelist);
    }
}

import{Component，Input}来自“angular2/core”；
从“/mountain list.component”导入{MountainListComponent}；
@组成部分({
选择器：“我的山”，
模板：`hidelist值：{{hidelist}}
`
})
导出类山体组件{
隐藏者=假；
}

子组件：

import {Component, Input} from "angular2/core";
import {MountainListComponent} from "./mountain-list.component";

@Component({
    selector: 'my-mountains',
    template: `hidelist value: {{hidelist}}
        <div class="row spacing" (childChanged)="hidelist=$event" *ngIf="!hidelist">
            <my-mountain-list></my-mountain-list>
        </div>
    `
})

export class MountainsComponent {
    hidelist = false;
}

import {Component, Output, EventEmitter} from "angular2/core";
import {MountainComponent} from "./mountain.component";
import {Mountain} from "./mountain";

@Component({
    selector: 'my-mountain-list',
    template: `
        <section class="col-md-12">
            <my-mountain class="col-md-4" *ngFor="#mountain of mountains" [mountain]="mountain" (click)="onChange()"></my-mountain>     
        </section>
    `,
    directives: [MountainComponent],
    outputs: ['childChanged']
})

export class MountainListComponent implements OnInit {
    childChanged = new EventEmitter<boolean>();

    onChange() {
        var hidelist: boolean;
        hidelist = true;
        this.childChanged.emit(hidelist);
    }
}

import{Component，Output，EventEmitter}来自“angular2/core”；
从“/mountain.component”导入{MountainComponent}；
从“/Mountain”导入{Mountain}；
@组成部分({
选择器：“我的山脉列表”，
模板：`
`,
指令：[MountainComponent]，
输出：['childChanged']
})
导出类MountainListComponent实现OnInit{
childChanged=新的EventEmitter（）；
onChange（）{
变量hidelist：布尔值；
hidelist=真；
this.childChanged.emit（隐藏列表）；
}
}

---

问题是

hidelist

变量值始终为false

添加一个模板变量

#mountain

，这样您就可以在事件表达式中引用该组件：

<my-mountain class="col-md-4" 
    *ngFor="#mountain of mountains" [mountain]="mountain" 
    #mountain 
    (click)="onChange(mountain.hidelist)"></my-mountain> 

---

添加一个模板变量

#mountain

，这样您就可以在事件表达式中引用该组件：

<my-mountain class="col-md-4" 
    *ngFor="#mountain of mountains" [mountain]="mountain" 
    #mountain 
    (click)="onChange(mountain.hidelist)"></my-mountain> 

---

将自定义事件绑定从div移动到

组件，如下所示

我已更新父组件：-

import {Component, Input} from "angular2/core";
import {MountainListComponent} from "./mountain-list.component";

@Component({
    selector: 'my-mountains',
    template: `hidelist value: {{hidelist}}
        <div class="row spacing" *ngIf="!hidelist">
            <my-mountain-list (childChanged)="hidelist=$event"></my-mountain-list>
        </div>
    `
})

export class MountainsComponent {
    hidelist = false;
}

import{Component，Input}来自“angular2/core”；
从“/mountain list.component”导入{MountainListComponent}；
@组成部分({
选择器：“我的山”，
模板：`hidelist值：{{hidelist}}
`
})
导出类山体组件{
隐藏者=假；
}

将自定义事件绑定从div移动到

组件，如下所示

我已更新父组件：-

import {Component, Input} from "angular2/core";
import {MountainListComponent} from "./mountain-list.component";

@Component({
    selector: 'my-mountains',
    template: `hidelist value: {{hidelist}}
        <div class="row spacing" *ngIf="!hidelist">
            <my-mountain-list (childChanged)="hidelist=$event"></my-mountain-list>
        </div>
    `
})

export class MountainsComponent {
    hidelist = false;
}

import{Component，Input}来自“angular2/core”；
从“/mountain list.component”导入{MountainListComponent}；
@组成部分({
选择器：“我的山”，
模板：`hidelist值：{{hidelist}}
`
})
导出类山体组件{
隐藏者=假；
}