角4刷新节仅

Question

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

更新Plunker：我解决，但头组件被称为每次，我必须把我的头组件中的每个HTML有没有更好的方法来做到这一点？

1. 登录
2. 国家的显示列表（在上面的用户信息）
3. 点击一下的国家和节目细节的一个（问题是在这里）
4. 回到列表

我只需要刷新国家/地区列表的一部分，但在我的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所以wone通过你的路线导航的影响上述用户模板代码...

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

Answer 2

先建立共同的标题组件使用routerLink和router.navigate

使你的组件角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 ] } } ]); 

：

• /碱是由来成分，其中，所述导航正在开始。
• mod是出口名称（app.routing儿童）
• countrydetail子组件名称
• COUNTRY_ID：参数