Angular 2-如何在更新組件的標誌值後刷新HTML？

我工作噸角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。任何幫助將不勝感激。

來源

2017-10-11 maadi

默認情況下，如果組件具有公共的成員可以使用「getter」和「二傳手」 - 在HTML應自動刷新自身的改變之後。所以 - 在你的情況 - 你應該使「標誌」HeaderComponent – happyZZR1400

只需在組件文件中執行此操作，不需要ChangeDetectorRef。在Angular 2中，變化檢測是自動的。定義類級別的變量標誌，並設置布爾值

headercomponent.ts

export class HeaderComponent { 

flag = false 

setflag() 
    { 
    alert("sadads") 
    this.flag=true 
    } 
}

Plunker Plunker here...

如果妳希望更新從其他組件標誌，那麼使用服務

**Service** 
@Injectable() 
export class FlagService { 
    flag = false; 

    toggleFlag() { 
    this.flag = !this.flag; 
} 
} 

export class HeaderComponent { 

flag: boolean; 

constructor(private flagService: FlagService) { 
    this.flag = this.flagService.flag; 
} 

}

來源

2017-10-11 07:39:17

的公衆成員，我做了同樣的。 – maadi

但它沒有更新HTML – maadi

請找到重擊者。它正在工作https://plnkr.co/edit/kL8Pee32XN7u7ofNxtBx？p =預覽 –

The只有你想要的方式是使用服務。這並不複雜它只是寫

//shared service 
@Injectable() 
export class DataService { 
    myVariable:any; 
}

之後，在您的組件中，使用此服務來獲取myVariable的值。如果你想

//Any component 
    @Component({..}) 
    export class MyComponent { 
    get myVariable() 
     return this.dataService.myVariable; 
    } 
    set myVariable(value) 
     this.dataService.myVariable=value; 
    } 
    constructor(private dataService: DataService){ } 

    myFunction() 
    { 
     this.myVariable="Hello World"; 
     //or 
     this.dataService.myVariable="Good By" 
    } 
    }

來源

2017-10-11 11:16:09 Eliseo

Angular 2-如何在更新組件的標誌值後刷新HTML？

回答

相關問題