Angular2 使用带有 <router-outlet> 的 @Inputs [英] Angular2 using @Inputs with <router-outlet>s
问题描述
我的页面中有一个子导航,它在一个公共主视图下方显示一些子视图.我想通过 <router-outlet>
将一个对象传递给子视图,以便我可以在主组件中检索一次数据并与我的子组件共享它.
I have a sub-navigation in my page that displays some subviews below a common main view. I would like to pass an object to the subviews through the <router-outlet>
so that I can retrieve the data once in the main component and just share it with my sub components.
注意:如果我在 main.html 中包含指令 <one></one>
它可以工作,但这不是我想要的行为.
Note: If I include the directive <one></one>
in the main.html it works but this isn't my desired behavior.
主视图:
<h1>Details</h1>
<a [router-link]="['./sub1']">One</a> |
<a [router-link]="['./sub2']">Two</a> |
<a [router-link]="['./sub3']">Three</a>
<hr/>
<router-outlet [data]="maindata"></router-outlet>
子视图 1:
<h2>{{ data.name }}</h2>
...
主视图:
@Component({
selector: 'main-detail',
directives: [ROUTER_DIRECTIVES],
templateUrl: './main.html'
})
@RouteConfig([
{ path: '/', redirectTo: '/one' },
{ path: '/one', as: 'One', component: OneComponent },
{ path: '/two', as: 'Two', component: TwoComponent },
{ path: '/three', as: 'Three', component: ThreeComponent }
])
export class MainComponent {
maindata: Object = {name:'jim'};
}
子视图 1:
@Component({
selector: 'one',
directives: [CORE_DIRECTIVES],
inputs: ['data'],
templateUrl: './one.html'
})
export class OneComponent {
@Input() data;
}
推荐答案
如果是简单的数据,你可以通过 RouteParams
If it's simple data you can pass them through RouteParams
<a [router-link]="['./sub3'],{name:'jim'}">Three</a>
然后在您的子视图中
@Component({
selector: 'one',
directives: [CORE_DIRECTIVES],
templateUrl: './one.html'
})
export class OneComponent {
data: any;
constructor(params: RouteParams){
this.data = params.get('data');
}
}
您还可以通过将 RouterConfig 移动到组件内部来设置路由以始终从组件传递参数(注意,这不是通常的做法):
You can also setup the route to always pass params from the component by moving the RouterConfig INSIDE the component (Note, this is not how it's normally done):
export class AppCmp {
history: string[] = [];
constructor(public list: PersonalizationList,
private router_: Router) {
list.get('histoy', (response) => {
this.history = response;
});
router_.config([
{ path: '/', component: HomeCmp, as: 'Home', data: this.history },
{ path: '/about', component: AboutCmp, as: 'About' }
]);
}
}
如果您打算做一些更复杂的事情,我建议使用服务在路由/组件之间进行通信.这实际上是我更喜欢的方式.
If you are going to do something more complex I suggest using a service to communicate between routes/components. It's actually the way I prefer to do it.
示例服务:
import {Injectable} from 'angular2/angular2';
@Injectable()
export class CarsService {
list1: array<any> = ['a','b','c','d'];
list2: array<any>;
constructor() {
this.list2 = [1,2,3,9,11];
}
}
您如何注入服务:
export class Cars {
constructor(cars:CarsService) {
this.cmpList1 = cars.list1;
this.cmpList2 = cars.list2;
}
}
通过这种方式,您可以使用该服务进行通信,而无需考虑父/子或其他奇怪的限制.
This way you can use the service to communicate regardless of parent/child or other weird restrictions.
这篇关于Angular2 使用带有 <router-outlet> 的 @Inputs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!