Angular 4更改app.component.html

Question

我创建了两个组件，分别称为login和home，现在，如果我已完成登录并设置了会话数据，那么我需要显示home组件的内容（如果未登录）。该怎么做？

app.component.html

<app-login></app-login>

login.component.ts

 export class LoginComponent implements OnInit {

     rForm: FormGroup;
     post:any;            
     userSession:string = '';
     useridAlert:string = '';
     password:string = '';
     passwordAlert:string = '';
     status:string = '';

constructor(private fb: FormBuilder, private http: Http) {
this.rForm = fb.group({
  'userid' : [null, Validators.required],
  'password' : [null, Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(12)])]
});
}

addPost(data) {
   let formdata = new FormData();
   formdata.append('userid', data.userid);
   formdata.append('password', data.password);

   this.http.post('http://127.0.0.1:8012/api/authenticate', formdata).subscribe(
    res => {
        const response = res.json();
        if(response.status){
          sessionStorage.setItem('userSession', JSON.stringify(response.data));
        }else{
          this.status = response.message;
        }
    }
);
}