Angular 将参数从一个组件传递到另一个角度2

我有很多组件。我在模块中声明我的组件。app.module

      import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';
    import { HttpModule }    from '@angular/http';

    // Material 2
    import { MdCoreModule } from '@angular2-material/core';
    import { MdButtonModule } from '@angular2-material/button';
    import { MdButtonToggleModule } from '@angular2-material/button-toggle';
    import { MdCardModule } from '@angular2-material/card';
    import { MdRadioModule } from '@angular2-material/radio';
    import { MdCheckboxModule } from '@angular2-material/checkbox';
    import { MdTooltipModule } from '@angular2-material/tooltip';
    import { MdInputModule } from '@angular2-material/input';
    import { MdToolbarModule } from '@angular2-material/toolbar';
    import { MdTabsModule } from '@angular2-material/tabs';
    import { MdSidenavModule } from '@angular2-material/sidenav';

    // import { MdMenuModule } from '@angular2-material/menu';
    // import { TabsModule  } from 'ng2-tabs';


    import { AppComponent } from './app.component';
    import "hammerjs";
    import { routing,  appRoutingProviders } from './app.routes';
    import { DashboardComponent } from './dashboard/dashboard.component';
    import { IndexComponent } from './index/index.component';
    import { LoginComponent } from './login/login.component';
    import { NotFoundComponent } from './not-found/not-found.component';
    import { IndexService }          from './services/index.service';
    import { ErrorMessageComponent } from './error-message/error-message.component';

    import { MenuComponent } from './menu/menu.component';
    import { PageAnalysisComponent } from './page-analysis/page-analysis.component';
    import { SettingsComponent } from './settings/settings.component';
    import { SiteVsSiteComponent } from './site-vs-site/site-vs-site.component';
    import { SidenavComponent } from './sidenav/sidenav.component';


    @NgModule({
      declarations: [
        AppComponent,
        DashboardComponent,
        IndexComponent,
        LoginComponent,
        NotFoundComponent,
        ErrorMessageComponent,
        MenuComponent,
        PageAnalysisComponent,
        SettingsComponent,
        SiteVsSiteComponent, SidenavComponent

      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
        MdCoreModule, MdCardModule, MdButtonModule, MdRadioModule,
        MdCheckboxModule, MdTooltipModule,MdInputModule, MdToolbarModule,MdButtonToggleModule,
        MdTabsModule,MdSidenavModule
      ],
      providers: [appRoutingProviders,IndexService ],
      bootstrap: [AppComponent]
    })
    export class AppModule {

    }

所以，现在我想将数据从组件Dashbord传递到PageAnalysisComponent组件。我怎么做？以下是组件仪表板的代码：

 import { Component, Input, Output, OnInit, ViewEncapsulation } from '@angular/core';
import { Params }   from '../services/index.service';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {
  data: any;

  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route
      .params
      .subscribe(v => this.data = "hello");
  }

}

and PageAnalysisComponent component:  


  import { Component, Input, Output, OnInit } from '@angular/core';
import { Params }   from '../services/index.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-page-analysis',
  templateUrl: './page-analysis.component.html',
  styleUrls: ['./page-analysis.component.css']
})
export class PageAnalysisComponent implements OnInit {
  data: any;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
   //I woild like to have here data

  }

}

如何将数据从dashbord传输到PageAnalysisComponent。

---

可以在这里执行吗？

在组件之间共享数据有3种方式

• 父组件到子组件：使用

  @Input（）

  和

  @Output（）

  实现
• 子组件到父组件：使用

  @ViewChild（）

  实现此目的
• 在任意两个组件之间：使用

  服务
  。服务是单例类（util在提供者中多次声明）。任何注入服务
  构造函数（publicmyservice:myService）{}
  的组件，其方法和属性现在都可用于服务
  

出于您的目的，请使用

服务

• 使用属性数据创建名为DataService的服务
• 将此服务注入

  仪表板组件

  和

  页面分析组件

• 在两个组件中使用

  dataService.data

  。由于该服务是单例服务，

  dataService.data

  的值将在整个应用程序中保持不变

---

PS：故意避免编写代码。阅读更多关于此处提到的服务和其他功能的信息，以获得更好的清晰度

组件之间共享数据有3种方式

• 父组件到子组件：使用

  @Input（）

  和

  @Output（）

  实现
• 子组件到父组件：使用

  @ViewChild（）

  实现此目的
• 在任意两个组件之间：使用

  服务
  。服务是单例类（util在提供者中多次声明）。任何注入服务
  构造函数（publicmyservice:myService）{}
  的组件，其方法和属性现在都可用于服务
  

出于您的目的，请使用

服务

• 使用属性数据创建名为DataService的服务
• 将此服务注入

  仪表板组件

  和

  页面分析组件

• 在两个组件中使用

  dataService.data

  。由于该服务是单例服务，

  dataService.data

  的值将在整个应用程序中保持不变

PS：故意避免编写代码。阅读更多关于此处提到的服务和其他功能的信息，以获得更好的清晰度