pass params от одного компонента к другому 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. Услуги - это одноэлементный класс (использование объявляется более одного раза в провайдерах). Любой компонент, который вводит услугу constructor(public myService: Myservice){}, их методы и свойства теперь доступны службе.

Для вашей цели используйте services.

• Создайте сервис под названием DataService с данными свойств.
• Внесите эту услугу в dashboardComponent и PageAnalysisComponent.
• Использовать dataService.data как в компоненте. Поскольку услуга является одноэлементной, значение dataService.data будет сохраняться в приложении.

PS: Умышленно избегали написания кодов. Узнайте больше об услугах и других функциях, упомянутых здесь, чтобы получить лучшую ясность.