孩子

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

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

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

(onVoted)="onVoted($event)"

您的情况稍有不同，因为您有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内加载了儿童组件，而实际上你正在做一些完全不同的事情。）

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

如何将数据从Child传递给Parent：Angular2

孩子

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

父app.component

这是父母，我能够看到孩子的日志，但不能看到这里的日志

父标记（我需要标题的地方）

1 个答案: