[英]pass params from one component to another angular2
I have many components. 我有很多组件。 I declare my components in module. 我在模块中声明了我的组件。 app.module. 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 {
}
So, now I would like to pass data from component Dashbord to PageAnalysisComponent component. 因此,现在我想将数据从组件Dashbord传递给PageAnalysisComponent组件。 How can I do it? 我该怎么做? here is a code of component Dashboard: 这是组件仪表板的代码:
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
}
}
How can I transfer data from dashbord to PageAnalysisComponent component. 如何将数据从dashbord传输到PageAnalysisComponent组件。 Is it possible to do here? 可以在这里做吗?
There are 3 ways of sharing data between component 组件之间共有3种共享数据的方式
@Input()
and @Output()
to achieve 父组件到子组件:使用@Input()
和@Output()
实现 @ViewChild()
to achieve this 子组件到父组件:使用@ViewChild()
实现此目的 Service
. 在任何两个组件之间:使用Service
。 Services are singleton class (util declared more than once in providers). 服务是单例类(在提供程序中多次声明util)。 Any component which injects a service constructor(public myService: Myservice){}
, their methods and properties are now available to the service. 现在,任何注入服务constructor(public myService: Myservice){}
,其方法和属性都可用于该服务。 For your purpose, use services
. 为了您的目的,请使用services
。
dashboardComponent
and PageAnalysisComponent
. 将此服务注入dashboardComponent
和PageAnalysisComponent
。 dataService.data
in both the component. 在两个组件中都使用dataService.data
。 As the service is a singleton, the value of dataService.data
will persist across the app. 由于服务是单例,因此dataService.data
的值将在整个应用程序中保持dataService.data
。 PS: Intentionally avoided writing codes. PS:故意避免编写代码。 Read more about services and other features mentioned here to get better clarity. 阅读有关此处提到的服务和其他功能的更多信息,以使内容更加清晰。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.