如何重定向到angular2中具有给定参数的子组件

应用程序组件

@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
        ]
    })

@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
    ]
})

@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" },
])

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

当用户输入带有编号的链接时，它应该将用户重定向到

localhost:3000/2/Home

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

这会将我重定向到

localhost:3000/1/Home

是否有方法传递userI而不是特定值。

app.component

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

    ])

主要成分

@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
        ]
    })

@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
    ]
})

@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”时，它知道下一步可以重定向到哪个子路由。此外，我还更改了

{path:“/”，重定向到：[“Main”，{userId:1}]}，

，以便在userId不存在时使用

我不认为

name

是

Route

类型的有效属性。在Angular的最新版本中是否删除了此选项？您是正确的。它不再需要了。这个问题是在angular还在测试阶段时发布的：）