在输入和输出之间传递组件之间的数据

问题描述：

所以我是新的角二，我看了几个教程，试图找出如何做到这一点，我不能得到它的工作。你能告诉我我在这里做错了吗？在输入和输出之间传递组件之间的数据

所以我试图从一个组件传递一个布尔值到另一个组件，这将触发一个ng类的动画。该事件发生在子组件中。我需要家长回应。

子组件：

export class DefaultRouteViewComponent implements OnInit { 
    @Input() compare: boolean = false; 
    @Output() compareEvent = new EventEmitter(); 

    constructor(public _menu: MenuService) {} 

    toggleCompare() { 
    this.compare = !this.compare; 
    this.compareEvent.emit({ 
     value: this.compare 
    }) 
    }

父组件：

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    template: '<div class="app-wrapper" [ngClass]="{'hide-app' : hideApp}" (hideApp)="hideAppChange($event);" (compareEvent)="hideAppChange($event)"></div>', 
    directives: NgClass, DefaultRouteViewComponent], 
}) 
export class AppComponent implements OnInit { 
    hideApp: Boolean; 

    constructor() {} 

    hideAppChange(event) { 
    console.log(event); 
    } 
}

我觉得这个问题是在父组件模板。虽然我不确定。请帮忙！谢谢。

子组件的选择器及其在父模板中的用法是什么？ –

'selector：'app-default-route-view'，'是选择器。父母是头。孩子只是路线的模板。 –

不确定'输出'在这种情况下工作，然后... –

答

可能重复Passing @Input and subscribing to @Output while navigating to a Route in Angular 2 Component

如果您需要家长和孩子路由组件之间的通信可能会使用Bi Directional service

您可能会看到类似implementation here

希望这有助于！

答

'compareEvent'事件绑定需要作为属性放在父组件的html中的子组件的选择器上。

所以在父组件的HTML模板，你需要这样的东西：

<app-default-route-view (compareEvent)="hideAppChange($event)"> 
</app-default-route-view>

希望帮助！

在输入和输出之间传递组件之间的数据

相关推荐