如何将特定绑定传递给 Angular 1.5 中组件路由器引入的 ng-outlet 组件? [英] How do I pass specific bindings to ng-outlet components brought in by the component router in Angular 1.5?

问题描述

我希望能够将参数传递给使用 ng-outlet 引入的子组件.但我不知道该怎么做.

I'd like to be able to pass parameters to child components brought in with ng-outlet. But I'm not sure how to do it.

这是我的组件绑定示例:

Here's an example of my component bindings:

app.component('profile', {
  bindings: {
    section: '=',
    currentUser: '<'
  },
...

通常我会这样调用:

<profile section="$ctrl.bio" current-user="$ctrl.selectedUser"></profile>

但是我有这个:

<ng-outlet></ng-outlet>

还有一个将配置文件传入的路由器.

And a router that passes the profile in.

 $routeConfig: [
        { path: '/Profile/:id', name: 'Profile', component: 'profile' }]

那么，我如何将其他基本绑定(可能是无法编码到 URL 中的绑定)传递给该组件??

So how the blazes do I pass other essential bindings, perhaps bindings that can't be encoded into the URL, to this component??

谢谢，非常感谢帮助

我被要求提供一个更具体的例子来说明我想做的事情.

我认为概念问题相当清楚，但这里有一个特殊情况，其中传递路由参数显然不够.假设在我的 App 组件级别我有一个事件回调函数 onDeleteItem(id)

I thought the conceptual issue was fairly clear, but here's a particular case where passing route parameters is clearly insufficient. Say at my App component level I have an event callback function, onDeleteItem(id)

我如何复制

bindings: {
    onDeleteItem: "&"
}

...

<some-component on-delete-item="$ctrl.onDeleteItem(id)"></some-component>

带有 ng-outlet?

with an ng-outlet?

推荐答案

我看了docs 并看到了路由器中使用的组件之一

I looked on the docs and saw this for one of the components used in the router

绑定:{ $router: '<'}

所以我在想如果该绑定可以被填充，那么为什么我们不能为其他绑定传递数据，但我查看了组件路由器的源代码，实际上我没有看到一种方法以这种方式传递数据.这是因为这里看起来像是 特别处理传入$router，但我认为此后模板没有被修改:

So I was thinking well if that binding can get filled in, then why can't we pass data for the other bindings, but I looked through the source of the component router, and I actually don't see a way to pass data that way. This is because here it looks like it's specially handling passing in the $router, but I don't think the template is modified after that:

activate(instruction) {
    ...
    this.controller.$$template = '<' + dashCase(componentName) + ' $router="::$$router"></' + dashCase(componentName) + '>';
    ...
};

不过我会说，您应该能够使用

I will say though, you are supposed to be able to pass data through to the component using

$routeConfig: [
    { path: '/Profile/:id', name: 'Profile', component: 'profile', data: { item1: 'item1'} }]

然后在构造函数中注入 RouteData组件，但我认为这仅在 angular 2 中，因为我没有在 angular 1 路由器中看到它的实现.

and then injecting RouteData in the constructor of the component, but I think this is only in angular 2, because I didn't see implementation for it the in the angular 1 router.

所以根据我所做的研究，我认为你不能，或者很难.此外，相关:如何将数据注入从路由器创建的 Angular2 组件 和 https://github.com/angular/angular/issues/4452

So based on the research I've done, I don't think you can, or it's difficult. Also, related: How to inject data into Angular2 component created from a router and https://github.com/angular/angular/issues/4452

这篇关于如何将特定绑定传递给 Angular 1.5 中组件路由器引入的 ng-outlet 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！