Angular2路由-将数据从父组件传递到子组件
Angular2 Routing - Passing data from parent component to a sub-child component
我正试图将一个简单的字符串对象从父组件传递到子组件。我尝试过以下方式:
父级.ts
import {Component} from 'angular2/core';
import {Router,ROUTER_DIRECTIVES,ROUTER_PROVIDERS,RouteConfig} from 'angular2/router';
import {ChildCmp} from "./child";
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'app',
template:`
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
export class ParentCmp{
public data = "Some data from parent.";
constructor (private _router:Router){
var config = [];
if(!this._router.registry.hasRoute("Child",ParentCmp))
config.push({path: "/child/...",component:ChildCmp,name: 'Child',useAsDefault:true, data: {"data": this.data}});
this._router.config(config);
}
}
bootstrap(ParentCmp,[
ROUTER_PROVIDERS
]);
child.ts
import {Component} from 'angular2/core';
import {RouteData,Router,ROUTER_DIRECTIVES,RouteConfig} from 'angular2/router';
import {SubChildCmp} from "./sub_child";
@Component({
selector: 'child',
template: `<router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
])
export class ChildCmp{
public data:Object;
constructor(private _data:RouteData,private _router:Router){
this.data = this._data.get("data");
var config = [];
if(!this._router.registry.hasRoute("SubChild",ChildCmp))
config.push({path:"/sub_child",component: SubChildCmp,name:"SubChild", useAsDefault:true, data:{"data":this.data}});
this._router.config(config);
}
}
sub_child.ts
import {Component} from 'angular2/core';
import {RouteData} from 'angular2/router';
@Component({
selector: "sub-child",
template: `Data from parent is -->
{{data}}
`
})
export class SubChildCmp{
public data:Object;
constructor(private _data:RouteData){
this.data = this._data.get("data");
}
}
但我收到了一张空白页。child.ts
中的路由配置似乎没有正确配置。我怎样才能做到这一点?我只是想把一些数据从parent
组件传递到sub-child
组件。我在plunker 上重新生成了这个问题
通常一个服务用于此用例
@Injectable
export class SharedData {
data;
}
@Component({
selector: 'app',
providers: [SharedData],
template:`
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
export class ParentCmp{
public data = "Some data from parent.";
constructor (private _router:Router, private _sharedData:SharedData){
var config = [];
if(!this._router.registry.hasRoute("Child",ParentCmp))
_sharedData.data = this.data;
}
}
}
export class SubChildCmp{
public data:Object;
constructor(_sharedData:SharedData){
this.data = _sharedData.data;
}
}
如果存在定时问题,可能需要将Observable
或BehaviorSubject
与subscribe()
一起使用,例如当SubChildCmp
在ParentCmp
设置值之前读取该值时
有关更多详细信息,请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html##双向服务
相关文章:
- Angular2路由-将数据从父组件传递到子组件
- EmberJs-将所有来自子组件的操作路由到父组件,再路由到父控制器
- Angular2路由错误/缺少组件
- React/flux - 子组件用户事件 - 是否应通过调度程序路由所有内容
- 如何在余烬中从组件过渡到路由
- Angular 2 - 从父组件的“第一个子”组件到“第二个子”组件的路由
- 带有组件标签的 VueJS 路由不起作用
- 对不同的路由使用相同的组件与 React Router
- DefaultRouter组件中的嵌套路由
- 反应路由器提供给“路由”的无效道具“组件”
- 是否可以避免在路由更改时重新呈现父路由处理程序组件
- 如何从组件外部访问路由参数
- 将当前路由活动 ID 传递给组件
- 如何将自定义组件与反应路由器路由转换一起使用
- 在 Angular 2 中为路由的通用组件提供异步依赖项.路由的解析等效项
- 如何在反应路由器中将子路由定义为反应组件
- 有Ember.js任何附加组件来路由请求
- 通过聚合物核心页组件指定默认的熨斗控制器路由(内部元素)
- 路由组件
- 用angular 1.5的组件路由处理浏览器刷新事件