Question

您好社区我有一个Plunker，我已经实现了这个流程：

更新了Plunker：我解决了，但每次都调用了标头组件，我必须在每个html中放置我的标头组件，有更好的方法吗？

登录
显示国家/地区列表（用户信息）
点击其中一个国家/地区并显示相关详情（问题在这里）
返回列表

我只需刷新国家/地区列表中的部分，但在我的plunker中您可以看到整个页面都很新鲜我希望将用户信息保持在最顶层（静态）。

我没什么经验。非常感谢！

@Component({
selector : 'login',
template: `
<input type="text" value="james">
<input type="password" value="123">
<button (click)="logIn()">Login</button>
`
})
class LoginComponent {
constructor(private route: ActivatedRoute,
            private router: Router) { }

    logIn () {
        //LOGIN LOGIC
        this.router.navigate(['/base']);
    }
}

Answer 1

router-outlet显示路线的内容。这意味着您必须将用户模板代码放在router-outlet之上，这样才会受到路线导航的影响......

<label>User: Mr. James</label> 
  <label>Role: Administrator</label>
  <hr>
<router-outlet>

Answer 2

首先使用routerLink和router.navigate

创建公共标题组件并渲染组件

angular doc有很好的例子 https://angular.io/guide/router

plunker https://plnkr.co/edit/ApjJkNwS6hfS56DjL7vt?p=preview

Answer 3

我终于设法解决了这个问题！我找到了办法，但这不是正确的方法。以下是解决方案：http://plnkr.co/edit/pNoGFP6fva4SYmcspoOj?p=preview

我在路由配置中使用了子组件并更改了导航的完成方式：

 this.router.navigate(['/base',  { outlets: { mod : ['countrydetail', country_id ] } } ]);

其中：

/ base是导航开始的原始组件。
mod是出口名称（app.routing中的孩子）
countrydetail子组件名称
country_id：参数

仅限页面的Angular 4 Refresh部分

3 个答案: