Angular http调用后角度重定向到路由_Angular

Angular http调用后角度重定向到路由

angular

Angular http调用后角度重定向到路由,angular,Angular,home.component.html <meta name="viewport" content="width=device-width" initial scale ="1.0" user scalable="no"> <body> <div class="container"> <div class="row"> <div class="form_bg"> <form> <h2 class=

home.component.html

<meta name="viewport" content="width=device-width" initial scale ="1.0" user 
scalable="no">

 <body>

 <div class="container">
 <div class="row">
 <div class="form_bg">
 <form>
   <h2 class="text-center">Login Page</h2>
  <br/>
  Enter Username : <input type="text" class="form-control" 
  [(ngModel)]="username" name="username">

  <a [routerLink]="['/profile']" class="btn btn-primary" 
  (click)="findProfile()">Submit</a>

  </form>
  </div>
  </div>
  </div>
  </body>


this.profileService.getProfileRepos().subscribe(repos => {
    console.log(repos);
    this.repos = repos;
  })    
 }

ngOnInit() {
}


 }


登录页面


输入用户名：
提交
this.profileService.getProfileRepos（）.subscribe（repos=>{
控制台日志（repos）；
本条：回购=回购；
})    
}
恩戈尼尼特（）{
}
}

当我输入用户名并单击提交时，它会将我重定向到另一个页面。但那页上什么也没显示

尽管我强烈反对你的网站要求提供另一个网站的登录详细信息，但以下是你做错的地方

 <a [routerLink]="['/profile']" class="btn btn-primary" onclick="findProfile()">Submit</a>

提交

应该是

 <a class="btn btn-primary" (click)="findProfile()">Submit</a>

提交

onclick

不能用于绑定组件上的函数。在angular中，必须使用

（单击）

。此外，使用

[routerLink]

在

findProfile

功能中，您应该在解析概要文件后导航到概要文件

也可以考虑使用RXJS运算符，如<代码>平面图< /> > > <代码>组合> >代码> <代码> <代码>，因为您在函数中有多个订阅，并且在重定向时不清楚。

@ RJV同意您的意见。

请尝试删除profile.html的所有内容，只需打印

hello

检查其是否工作，如果其工作条件不符合您的要求

请调用profile.component.ts的ngOnInit（）方法内部的方法，因为一旦profile.component.ts获得，html就会呈现。

应该是

我已经做了您建议的更改。现在，当我点击登录时，它将我重定向到另一个页面，该页面仅在控制台中显示用户的详细信息。如何在主屏幕上显示。在模板上尝试

{{repos | json}

。Http调用是异步的