Angular 2如何从路由组件中发出数据

Question

当我尝试将数据发送到变量dataStr然后我console print在应用程序组件中它返回undefined;如何将数据从主组件传递到应用程序组件？

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

app.component.html

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

home.component.ts

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-routing.module.ts

import { NgModule }     from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './pages/home.component';

const routes: Routes = [
    { path: '', redirectTo: 'ka/home', pathMatch: 'full' },
    {
        path: 'ka',
        data: { lang: 'ka'},
        children: [
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent, data: { lang: 'ka'} }
        ]
    },
    {
        path: 'en',
        data: { lang: 'en'},
        children: [
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent, data: { lang: 'en'} }
        ]
    },
];


@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {}

Answer 1

首先,您需要创建服务:

事件emitter.service.ts

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

@Injectable()
export class EventEmiterService {

  dataStr = new EventEmitter();

  constructor() { }

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

现在以这样的providers[]数组导入该服务NgModule():

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