我工作噸角4.我有我的應用程序的基本結構是這樣的。Angular 2-如何在更新組件的標誌值後刷新HTML?
AppComponent.ts
<app-header></app-header>
<router-outlet ></router-outlet>
<app-footer></app-footer>
現在,我有一個問題here.my菜單欄是在我的項目只加載一次headrer組件。我想在運行時更改一些菜單欄項目。爲此,我在header.component.ts中設置了標誌。
現在,從那個我想改變菜單蝙蝠的組件中,我調用headercomponent.ts函數來設置標誌的值。我成功地調用了該函數,它也更新了標誌的值。但html沒有改變。
這是我的headercomponent.ts函數,它設置標誌的值。
setflag()
{
alert("sadads")
this.flag=true
console.log(this.flag)
this.ref.detectChanges();
this.ref.reattach();
}
,這裏是在headercomponent我想更新HTML部分。
<ul class="dropdown-menu">
<li ><a [routerLink]="['/login']">Log in</a></li>
<li><a [routerLink]="['/register']">Sign up</a></li>
<li *ngIf="flag==true"><a [routerLink]="['/register']">Dashboard</a></li>
</ul>
和homecomponent.ts我打電話這樣這個功能。
import {HeaderComponent} from "../header/header.component";
providers: [HeaderComponent]
constructor(private ref: ChangeDetectorRef,private comp: HeaderComponent) {
}
ngOnInit() {
this.comp.setflag();
}
這將從頭調用函數並更改標誌的值。但該更改值將不會調用html中的更改。
任何機構都可以告訴我,在這種情況下我怎麼能更新headercomponent中的html。 任何幫助將不勝感激。
默認情況下,如果組件具有公共的成員可以使用「getter」和「二傳手」 - 在HTML應自動刷新自身的改變之後。所以 - 在你的情況 - 你應該使「標誌」HeaderComponent – happyZZR1400