javascript - 如何将数据从子级传递给父级 : Angular2

Question

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

但是到目前为止还无法从子项中获取字符串变量到父项中。

---

child

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

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);
    }
}

父应用程序组件

这是父级，我可以看到子级的日志，但这里看不到日志

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 尝试的通信方式当 Child 直接嵌套在 Parent 中时使用。在这种情况下，在 Parent 上，您可以将事件处理程序绑定(bind)到发出的事件，如他们的示例所示:

(onVoted)="onVoted($event)"

您的情况有点不同，因为您有 router-outlet 将组件动态加载到父级中，这会带来更多的复杂性。您仍然需要绑定(bind)(或订阅)事件，但是(正如您可能遇到的那样)您不能直接将绑定(bind)添加到 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 中加载，而实际上您正在做一些完全不同的事情。)

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