将参数从一个组件传递到另一个angular2

Question

我有很多组件。 我在模块中声明了我的组件。 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组件。 可以在这里做吗？

Answer 1

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

• 父组件到子组件：使用@Input()和@Output()实现
• 子组件到父组件：使用@ViewChild()实现此目的
• 在任何两个组件之间：使用Service 。 服务是单例类（在提供程序中多次声明util）。 现在，任何注入服务constructor(public myService: Myservice){} ，其方法和属性都可用于该服务。

为了您的目的，请使用services 。

• 使用属性数据创建一个名为DataService的服务。
• 将此服务注入dashboardComponent和PageAnalysisComponent 。
• 在两个组件中都使用dataService.data 。 由于服务是单例，因此dataService.data的值将在整个应用程序中保持dataService.data 。

PS：故意避免编写代码。 阅读有关此处提到的服务和其他功能的更多信息，以使内容更加清晰。