如何将数据从子级传递到父级：Angular2

Question

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

但是到目前为止，还不能将字符串变量从子级获取到父级。

---

孩子

在这里，我将类别标题发送给发射器

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>

Answer 1

当子级直接嵌套在父级中时，将使用您从The Cookbook中尝试的通信方法。 在这种情况下，您可以在Parent上将事件处理程序绑定到发出的事件，如其示例所示：

(onVoted)="onVoted($event)"

您的情况有所不同，因为您具有router-outlet ，该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加载，而实际上您正在做的事情完全不同。）

注意：这是未经测试的代码。