如何使用按钮在Angular中的其他组件中打开HTML页面

Question

我有一个包含多个组件的角度项目。我用HTML创建了一个按钮。如何使按钮从另一个组件打开HTML页面？另外，当我添加新按钮时，网页将变为空白，仅显示背景。

这是我使用Webstorm进行的有角度的项目。

<button  class="btn nav-link m-1 btn btn-success w-100"
         (click)="openToggle>
  Open page
</button>

Answer 1

请使用路由https://angular.io/guide/router。

this.router.navigate（['/ heroes']）;

Answer 2

单击按钮时，可以使用navigateByUrl或navigate更改路线或页面。

<button  class="btn nav-link m-1 btn btn-success w-100"
     (click)="openToggle()">Open page
</button>

您的.ts文件应该是这样

constructor(private router: Router) {}

openToggle() {
 this.router.navigateByUrl('/profile');
}

或

openToggle() {
this.router.navigate(['/profile']);
}