Question

我想使用* ngIf指令使所需的div元素在模板中可见。我不想使用reload（）函数，因为它会重新加载整个页面。

我想基于通过单击onChangeLang（）函数动态更改的语言来更改html内容。此函数更改语言值（例如bn，en），但不反映html模板。但是，当我使用非预期的reload（）函数时，它可以工作。

预先感谢...

模板

<button (click)="onChangeLang()">Change Language</button>

<div *ngIf= "lang === 'en'">
   <p>I love walking.</p>
</div>

<div *ngIf= "lang === 'bn'">
   <p>I love reading history books.</p>
</div>

脚本

lang: string;

onChangeLang() {
    return (this.lang === 'bn' ? 'en' : 'bn');
}


I expect <p> element to be changed smoothly not reloading the entire page.

Answer 1

您需要在lang方法中更新onChangeLang()变量。这将触发绑定，并告诉angular重新验证ngIf条件。

lang: string;

onChangeLang() {
    // emulate toggle behaviour
    this.lang = (this.lang === 'bn' ? 'en' : 'bn');
}


I expect <p> element to be changed smoothly not reloading the entire page.

顺利刷新页面

1 个答案: