javascript - 流畅刷新页面

Question

我想使用 *ngIf 指令使我想要的 div 元素在模板中可见。我不想使用 reload() 函数来执行此操作，因为它会重新加载整个页面。

我想根据通过单击 onChangeLang() 函数动态更改的语言更改我的 html 内容。此函数更改语言值(​​例如:bn、en)，但它不反射(reflect) 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

您需要更新 onChangeLang() 方法中的 lang 变量。这将触发绑定(bind)并告诉 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.