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的值将在整个应用中保持不变。

PS：故意避免编写代码。详细了解此处提到的服务和其他功能，以获得更好的清晰度。

将params从一个组件传递到另一个组件

1 个答案: