如何在angular2中使用给定参数redirectTo子组件

Question

app.component

@RouteConfig([   
        //{ path: "/:userId/...", component: MainComponent, name: "Main", useAsDefault: true },
        //{ path: "/:userId", redirectTo: ["Main", "Home"] },
        { path: "/:userId/...", component: MainComponent, name: "Main", useAsDefault: true },
        { path: "/:userId", redirectTo: ["Main", {userId: 1}, "Home"] },
    ])
    @Component({
        selector: "app-component",
        template: "<router-outlet></router-outlet>",
        directives: [
            ROUTER_DIRECTIVES
        ],
        providers: [
            RouteParams
        ]
    })

main.component

@RouteConfig([
    { path: "/home/", component: HomeComponent, name: "Home" },
    { path: "/products/:productId", component: ProductsComponent, name: "Products" },
    { path: "/cv", component: CvComponent, name: "Cv" },
    { path: "/contact", component: ContactComponent, name: "Contact" },
    { path: "/home", redirectTo: ["Home"] },
])

@Component({
    selector: "main-component",
    templateUrl: "js/app/components/main.component/main.component.html",
    directives: [
        ROUTER_DIRECTIVES,
        HeaderComponent,
        FooterComponent
    ]
})

我正在努力实现这样的目标：

当用户输入带有数字 localhost:3000/2 的 link 时，它应该将他重定向到 localhost:3000/2/Home

{ path: "/:userId", redirectTo: ["Main", {userId: 1}, "Home"] }

这会将我重定向到 localhost:3000/1/Home 有没有办法传递 userI 而不是特定值。

Answer 1

app.component

@RouteConfig([
        { path: "/:userId/...", component: MainComponent, name: "Main" },
        { path: "/", redirectTo: ["Main", {userId:1}] },

    ])

main.component

@RouteConfig([
    { path: "/home/", component: HomeComponent, name: "Home", useAsDefault: true},
    { path: "/products/:productId", component: ProductsComponent, name: "Products" },
    { path: "/cv", component: CvComponent, name: "Cv" },
    { path: "/contact", component: ContactComponent, name: "Contact" },
])

事实证明，我必须在子路由上添加 useAsDefault: true，因此当 app.component 重定向到 "Main" 时，它知道接下来可以重定向到哪个子路由。当 userId 不存在时，我还更改了 { path: "/", redirectTo: ["Main", {userId:1}] },。

如何在angular2中使用给定参数redirectTo子组件

How do I redirectTo child component with given parameter in angular2

angular2-routing

angular