使用 child 从 parent 获取 routerParams 发送
Getting routerParams send from parent with child
我有一个组件有 @Routeconfig
(parent)。
import {Component} from "angular2/core";
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet} from 'angular2/router';
import {Theme} from "../theme/theme";
import {Router,RouteParams} from "angular2/router";
import {OrganisationService} from "./organisation.service";
import {Organisation} from "./organisation";
import {OrganisationComponent} from "./organisation.component";
import {EmptyComponent} from "../../empty.component";
import {ThemeListComponent} from "../theme/theme-list.component";
@Component({
template: `
<div class="container">
<ul>
<li *ngFor="#organisation of organisations">
<a [routerLink]="['./ThemeList',{ organisationId: organisation.organisationId }]" >{{organisation.organisationName}}</a>
</li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives:[RouterOutlet],
providers:[OrganisationService]
})
@RouteConfig([
{path: '/', name:'Empty', component:EmptyComponent,useAsDefault: true},
{path: '/:organisationId/Themes/...', name:'ThemeList', component:ThemeListComponent}
])
export class OrganisationListComponent {
public organisations:Organisation[];
constructor(private organisationService:OrganisationService) {
this.organisationService.getOrganisations().subscribe((organisations:Organisation[])=> {
this.organisations = organisations;
});
}
}
我想将 ID 从组织发送到我的 ThemeListComponent
(child)。这有效,但是当我尝试使用我的 child 组件获取 routeParams 时,它会出错。
EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).
ORIGINAL EXCEPTION: Route config should contain exactly one "component", "loader", or "redirectTo" property.
这是 ThemeListComponent 以及我如何尝试接收 routerParams:
import {Component} from "angular2/core";
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet} from 'angular2/router';
import {Theme} from "../theme/theme";
import {Router,RouteParams} from "angular2/router";
import {ThemeComponent} from "../theme/theme.component";
import {ThemeService} from "./theme.service";
import {EmptyComponent} from "../../empty.component";
@Component({
template: `
<div class="container">
<ul>
<li *ngFor="#theme of themes">
<a [routerLink]="['./Theme',{ themeId: theme.themeId }]">{{theme.name}}</a>
</li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives:[RouterOutlet,RouteParams],
providers:[ThemeService]
})
@RouteConfig([
{path: '/', name:'Empty', component:EmptyComponent,useAsDefault: true},
{path: '/:themeId', name:'Theme', component:ThemeComponent}
])
export class ThemeListComponent {
public themes:Theme[];
constructor(private themeService:ThemeService,private routeParams:RouteParams) {
let id = +this.routeParams.get('id');
this.themeService.getThemes(id).subscribe((themes:Theme[])=>{
this.themes = themes;
});
}
}
每当我在 child 的构造函数中实现 routerParams 时,我都会收到错误消息。
目前没有简单的方法。另见 https://github.com/angular/angular/issues/6985
提供了一些解决方法。
我遇到了类似的问题。我通过简单地在与 RouteConfig, ROUTER_DIRECTIVES, RouterOutlet.
相同的行中导入 RouteParams 和 Router 来解决它
这可能会给您一个错误。所以我改变了
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet} from 'angular2/router';
import {Router,RouteParams} from "angular2/router";
至
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet, Router,RouteParams} from 'angular2/router';
我不明白为什么这对两个单独的导入不起作用,但这应该可以解决问题。
我有一个组件有 @Routeconfig
(parent)。
import {Component} from "angular2/core";
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet} from 'angular2/router';
import {Theme} from "../theme/theme";
import {Router,RouteParams} from "angular2/router";
import {OrganisationService} from "./organisation.service";
import {Organisation} from "./organisation";
import {OrganisationComponent} from "./organisation.component";
import {EmptyComponent} from "../../empty.component";
import {ThemeListComponent} from "../theme/theme-list.component";
@Component({
template: `
<div class="container">
<ul>
<li *ngFor="#organisation of organisations">
<a [routerLink]="['./ThemeList',{ organisationId: organisation.organisationId }]" >{{organisation.organisationName}}</a>
</li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives:[RouterOutlet],
providers:[OrganisationService]
})
@RouteConfig([
{path: '/', name:'Empty', component:EmptyComponent,useAsDefault: true},
{path: '/:organisationId/Themes/...', name:'ThemeList', component:ThemeListComponent}
])
export class OrganisationListComponent {
public organisations:Organisation[];
constructor(private organisationService:OrganisationService) {
this.organisationService.getOrganisations().subscribe((organisations:Organisation[])=> {
this.organisations = organisations;
});
}
}
我想将 ID 从组织发送到我的 ThemeListComponent
(child)。这有效,但是当我尝试使用我的 child 组件获取 routeParams 时,它会出错。
EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).
ORIGINAL EXCEPTION: Route config should contain exactly one "component", "loader", or "redirectTo" property.
这是 ThemeListComponent 以及我如何尝试接收 routerParams:
import {Component} from "angular2/core";
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet} from 'angular2/router';
import {Theme} from "../theme/theme";
import {Router,RouteParams} from "angular2/router";
import {ThemeComponent} from "../theme/theme.component";
import {ThemeService} from "./theme.service";
import {EmptyComponent} from "../../empty.component";
@Component({
template: `
<div class="container">
<ul>
<li *ngFor="#theme of themes">
<a [routerLink]="['./Theme',{ themeId: theme.themeId }]">{{theme.name}}</a>
</li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives:[RouterOutlet,RouteParams],
providers:[ThemeService]
})
@RouteConfig([
{path: '/', name:'Empty', component:EmptyComponent,useAsDefault: true},
{path: '/:themeId', name:'Theme', component:ThemeComponent}
])
export class ThemeListComponent {
public themes:Theme[];
constructor(private themeService:ThemeService,private routeParams:RouteParams) {
let id = +this.routeParams.get('id');
this.themeService.getThemes(id).subscribe((themes:Theme[])=>{
this.themes = themes;
});
}
}
每当我在 child 的构造函数中实现 routerParams 时,我都会收到错误消息。
目前没有简单的方法。另见 https://github.com/angular/angular/issues/6985
我遇到了类似的问题。我通过简单地在与 RouteConfig, ROUTER_DIRECTIVES, RouterOutlet.
相同的行中导入 RouteParams 和 Router 来解决它这可能会给您一个错误。所以我改变了
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet} from 'angular2/router';
import {Router,RouteParams} from "angular2/router";
至
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet, Router,RouteParams} from 'angular2/router';
我不明白为什么这对两个单独的导入不起作用,但这应该可以解决问题。