我想更改页面内容而不重新加载角度 6答案

【问题标题】：I want to change the page content without reloading in angular 6我想更改页面内容而不重新加载角度 6
【发布时间】：2019-07-15 05:20:51
【问题描述】：

我是 Angular 的新手。我想动态更改页面内容，或者可能会显示一个包含新内容的新组件。我的网站上有卡片。请参考链接 Cards

我想更改页面内容并在卡片上单击的每个按钮上显示不同的内容。我已经创建了一个方法以及其中的内容。？

Component.html

<a href="#" class="btn btn-primary" (click)="onFirstClick()">Go somewhere</a>

component.ts

onFirstClick() {
}

我是否需要创建一个新组件来显示新内容。我该怎么办？请帮忙

【问题讨论】：

【解决方案1】：

这取决于你想要动态改变什么，但无论如何 Angular 在这方面确实做得很好。例如，如果您想在第一次单击时切换按钮的文本，您可以这样做：

component.ts:

buttonTxt: string = 'Click me';

onFirstClick() {
   this.buttonTxt = 'Button Clicked';
}

component.html:

<a href="#" class="btn btn-primary" (click)="onFirstClick()">{{buttonTxt}}</a>

动态更改页面上的内容是 angular 的一种很好的方式，并且有很多不同的方式：ngIf*（根据 ts 上的布尔变量隐藏或显示 html 组件）等等。

【讨论】：