相关疑难解决方法(0)

在我的一个Angular 2路线的模板(FirstComponent)中,我有一个按钮

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

我的目标是实现:

按钮单击 - >路由到另一个组件,同时保留数据,而不使用其他组件作为指令.

这就是我试过的......

第一种方法

在同一视图中,我存储基于用户交互收集相同的数据.

first.component.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

一般情况下我路由SecondComponent通过

 this._router.navigate(['SecondComponent']);

最终传递数据

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

而带参数的链接的定义是

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', …

我正在玩Angular 2.0 new router,我尝试使用类似于Angular 1.X ui-router/ng-route解析机制的东西.

我试图通过以下方式实现此目的RouteData:

import {Component, ViewEncapsulation} from 'angular2/core';
import {
  RouteConfig,
  ROUTER_DIRECTIVES
} from 'angular2/router';
// import {HTTP_PROVIDERS} from 'angular2/http';

import {HomeCmp} from '../home/home';
import {AboutCmp} from '../about/about';
import {NameList} from '../../services/name_list';
import {PersonalizationList} from '../../services/personalization_list';

@Component({
  selector: 'app',
  viewProviders: [NameList, PersonalizationList],
  templateUrl: './components/app/app.html',
  styleUrls: ['./components/app/app.css'],
  encapsulation: ViewEncapsulation.None,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', component: HomeCmp, as: 'Home', data: this.history },
  { path: '/about', component: AboutCmp, as: 'About' }
])
export class …

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

这是我的组件绑定的一个例子:

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

通常我会像这样调用它:

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

但相反,我有这个:

<ng-outlet></ng-outlet>

和一个传递配置文件的路由器.

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

那么如何将火焰传递给这个组件的其他基本绑定,也许是无法编码到URL中的绑定？

谢谢,非常感谢帮助

编辑:我被要求提供一个更具体的例子,说明我想做什么.

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

我该如何复制

bindings: {
    onDeleteItem: "&"
}

...

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

有一个出口？