Question

我的应用的主页只是

<router-outlet></router-outlet>

并且该类看起来像这样：

@RouteConfig([
    {path:'/', name: 'StartScreen', component: StartScreen, useAsDefault: true}
])

export class AppHome {
    constructor(private router: Router) {}
}

由开始屏幕的默认路由填充，其中包含搜索框。这部分有效，直到我想做更多......

通过单击搜索，它会在开始屏幕类中触发此功能：

@RouteConfig([
    {path:'/...', name: 'Results', component: Results}
])


export class StartScreen{
    private router : Router

    constructor(router: Router)
        this.router = router;
    }

    search(input) {
        this.data.search(input);
        this.router.parent.navigate(['Results']);
    }
}

开始屏幕没有自己的RouterOutlet。我其实想要＆＃34;结果＆＃34;用于替换开始屏幕并填充主页的RouterOutlet的模板。

我是否在正确的轨道上，我的问题是由于其他语法错误造成的，或者我错误地解决了这个问题？

Answer 1

您可能想尝试子路线。

EG。在"autoload": { "classmap": [ "database" ], "psr-4": { "App\\": "app/" }, "files": [ "app/Http/helpers.php" ] },组件中，将AppHome更改为

@RouteConfig

并且，在@RouteConfig([ {path:'/startscreen/...', name: 'StartScreen', component: StartScreen, useAsDefault: true} ])组件中，定义StartScreen，如

@RouteConfig

另请参阅

How to use child routes in Angular 2

Answer 2

我最终做的是......

在AppHome级别，有两个视图可以填充RouterOutlet：

@RouteConfig([
  {path:'/', name: 'StartScreen', component: StartScreen, useAsDefault: true},
  {path:'/Results/...', name: 'Results', component: Results}
])

当在StartScreen DOM中触发搜索时，它会触发上面的搜索功能，路由到Results，它有自己的一组路径：

 search(input) {
    this.data.search(input);
    this.router.parent.navigate(['Results']);
 }

如何使用子路由在Angular 2

2 个答案: