將params從一個組件傳遞到另一個angular2

我有很多組件。我在模塊中聲明我的組件。 app.module。將params從一個組件傳遞到另一個angular2

 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組件。這裏有可能嗎？

來源

2016-09-21 Vahe Akhsakhalyan

有組件之間共享數據的3種方式

父組件的子組件：使用@Input()和@Output()實現
子組件父組件：使用@ViewChild()實現這一
任何關係兩個組件：使用Service。服務是單例類（util在提供程序中多次聲明）。任何注入服務constructor(public myService: Myservice){}的組件現在都可以使用它們的方法和屬性。

爲達此目的，請使用services。

使用屬性數據創建名爲DataService的服務。
在dashboardComponent和PageAnalysisComponent中注入此項服務。
在組件中使用dataService.data。由於該服務是單身人士，所以dataService.data的價值將持續存在於整個應用程序中。

PS：故意避免編寫代碼。閱讀更多關於這裏提到的服務和其他功能以獲得更好的清晰度。

來源

2016-09-21 11:18:26

將params從一個組件傳遞到另一個angular2

回答

相關問題