Javascript 角度2如何从布线组件发射数据

当我尝试向变量

dataStr

发送数据时，然后我在

控制台打印

应用程序组件中，它返回

未定义如何将数据从主组件传递到应用程序组件

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'main',
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {

    public dataStr: string;

    setDataStr(dataStr) {
        console.log(dataStr);
    }
}

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'home-page',
    template: `<h1>Test</h1>`
})
export class HomeComponent implements OnInit {

    @Output()
    dataStr = new EventEmitter();

    ngOnInit() {
        this.dataStr.emit('Test');
    }
}

app.component.html

<router-outlet (dataStr)="setDataStr($event)"></router-outlet>

首先，您需要创建服务：

事件发射器.service.ts

import {Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class EventEmiterService {

  dataStr = new EventEmitter();

  constructor() { }

  sendMessage(data: string) {
    this.dataStr.emit(data);
  }
}

现在在
NgModule（）
的
providers[]
数组中导入该服务，如下所示：

 @NgModule({
  declarations: [...],
  imports: [..],
  providers: [EventEmiterService],
  bootstrap: [AppComponent]
})

现在在您的home.component.ts中添加以下代码，别忘了导入服务

sub: Subscription;

constructor(private _eventEmiter: EventEmiterService, private router: Router) {


  ngOnInit() {
   this.sub = this.router
      .data
      .subscribe(v => {
          console.log(v);
          this._eventEmitter.sendMessage(v)
       });

  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

现在将以下代码添加到您的app.component.ts，不要忘记导入服务

constructor(private _eventEmiter: EventEmiterService) {
  }

  setDataStr() {
    this._eventEmiter.dataStr.subscribe(data => console.log(data))
  }

尝试我的更新代码，它将工作200%。我已经详细解释了。谢谢你的帮助，但我想你没有看到问题所在。问题是当我试图从从路由器出口加载的组件传递数据时。无法捕获主组件中的内容。我需要找到通过路由传递数据的方法。你需要通过路由器访问数据。请参阅我的最新答案。有关更多信息，请参阅官方文档，我认为并不是一切都很清楚，有关我在Plunker上制作的项目的更多细节。在那个里你们可以看到src/app.ts，还有一些注释，我想在这些注释中捕捉来自子组件的数据，比如home和about。谢谢你的帮助：）
constructor(private _eventEmiter: EventEmiterService) {
  }

  setDataStr() {
    this._eventEmiter.dataStr.subscribe(data => console.log(data))
  }