Angular 4 仅刷新页面部分

Question

大家好，我有一个 Plunker 实现了这个流程：

更新 Plunker：我解决了，但是每次都会调用 header 组件，我必须将我的 header 组件放在每个 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

首先创建通用 header 组件并使用 routerLink 和 router.navigate

渲染您的组件

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

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

Answer 3

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

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

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

其中：

/base 是原点组件，导航开始的地方。
mod为网点名称(children in app.routing)
countrydetail child 组件名称
country_id: 一个参数

Angular 4 仅刷新页面部分

Angular 4 Refresh section of page only

redirect

url-routing

page-refresh

angular