如何将数据从子项传递给父项:Angular2

我正在关注这里的文档: https : //angular.io/docs/ts/latest/cookbook/component-communication.html#!# child-to-parent

但是到目前为止,还是无法从子进入父进程的stringvariables。


孩子

在这里,我将分类标题发送给发射器

import { Component, ChangeDetectionStrategy, EventEmitter, Output, OnInit, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.Emulated, selector: 'category', styleUrls: [ './category.component.css' ], templateUrl: './category.component.html' }) export class CategoryComponent implements OnInit { title: string = ''; @Output() onCategoryTitled = new EventEmitter<string>(); constructor(private route: ActivatedRoute) {} ngOnInit() { this.title = this.route.snapshot.params['title']; console.log('this.title', this.title) this.onCategoryTitled.emit(this.title); } } 

父app.component

这是父母,我可以看到孩子的日志,但不能看到这里的日志

 import { Component, Directive, ElementRef, Renderer, ChangeDetectionStrategy, OnInit, ViewEncapsulation } from '@angular/core'; @Component({ changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.Emulated, selector: 'app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { catTitle:string; onCategoryTitled(cat_title: string) { console.log('EVENT recieved cat_title:', cat_title) this.catTitle = cat_title; } ngOnInit() { console.log('AppComponent init') } } 

父母标记(我需要标题)

 <div class="container"> <div class="row"><div class="col-md-12 h20"></div></div> <div class="row"> <div class="col-md-8 col-sm-8"> <ol class="breadcrumb"> <li><a href="/wiki">Home</a></li> <li>{{ catTitle }}</li> <!-- <li><a href="/wiki/category">Categories</a></li> --> </ol> </div> <div class="col-md-2 col-sm-2"> <div class="input-group"> <input type="text" class="search-input form-control" placeholder="Search for..."> </div> </div> </div> <router-outlet></router-outlet> <footer class="container col-sm-12"> <p>©2017 <strong>WikiTags</strong> </footer> </div> 

在这里输入图像说明

       

网上收集的解决方案 "如何将数据从子项传递给父项:Angular2"

当孩子直接嵌套在父亲中时,就可以使用你从“食谱”中尝试的通信方法。 在这种情况下,在Parent中,你将把你的事件处理程序绑定到发送事件,就像在他们的例子中一样:

(onVoted)="onVoted($event)"

你的情况有点不同,因为你有一个router-outlet ,dynamic地将组件加载到父router-outlet ,并且引入了更多的复杂性。 您仍然需要绑定(或订阅)该事件,但是(正如您可能遇到的那样), 不能像该简单的食谱示例所示的那样直接将绑定添加到router-outlet 。 但是,您可以引入一个“中介”服务,可以通过router-outlet边界为您传达事件。

例如,你可以写一些“沟通”服务,如下所示:

 import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Subject } from 'rxjs/Subject'; @Injectable() export class MyCommunicationService { constructor() { } private emitChangeSource = new Subject<any>(); changeEmitted$ = this.emitChangeSource.asObservable(); // Service message emitChange(myMessage: any) { this.emitChangeSource.next(myMessage); } } 

从您的子组件中发出事件:

 ... export class CategoryComponent implements OnInit { constructor(private _myCommunicationService: MyCommunicationService) {} doSomething(): void { ... // Emit your event with message this._myCommunicationService.emitChange('some change'); } ... 

然后在包含router-outlet的父组件(在你的情况下app.component)中监听(订阅)事件:

 export class AppComponent implements OnInit { constructor(private _myCommunicationService: MyCommunicationService) { // Subscribe to the service event _myCommunicationService.changeEmitted$.subscribe(myMessage => { // TODO: Do what you need to to with the message/value ... }); } } 

让我知道这是否需要澄清。 (我本来也可能完全错过了船,并且假设实际上你正在做一些完全不同的事情,那么子组件正在router-outlet内部加载。)

注意:这是未经testing的代码。