角度2 - コンポーネントのフラグ値を更新した後にHTMLをリフレッシュする方法は？

Question

私は角度4を働いています。私はこのような私のアプリの基本的な構造を持っています。

AppComponent.ts

<app-header></app-header> 


<router-outlet ></router-outlet> 

<app-footer></app-footer> 

は今、私はhere.myメニューバーが一度だけ私のプロジェクトでロードheadrerコンポーネントであるという問題があります。私は実行時にいくつかのメニューバーの項目を変更したい。その目的のために私はheader.component.tsにフラグを設定している。

ここで、メニューbatを変更したいコンポーネントから、flagの値を設定するheadercomponent.tsの関数を呼び出します。私は正常に関数を呼び出すと、それはまた、フラグの値を更新します。 htmlは変更されませんでした。

ここに私のheadercomponent.tsフラグの値を設定する機能です。

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


    console.log(this.flag) 
    this.ref.detectChanges(); 
    this.ref.reattach(); 
    } 

、ここでHTMLは私が更新したいheadercomponentで一部です。

<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の変更は呼び出されません。

どのようなボディでも、このシナリオではどのようにヘッダコンポーネントのhtmlを更新できますか？ ご協力いただければ幸いです。

Answer 1

コンポーネントファイルでこれを行うだけで、ChangeDetectorRefは必要ありません。角度2の変化検出は自動で行われます。

headercomponent.ts

export class HeaderComponent { 

flag = false 

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

Plunker Plunker here...

クラスレベル変数フラグとセットブール値を定義しますuは、他のコンポーネントからのフラグを更新したい場合は、サービス

**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; 
} 

} 

を使用

Answer 2

あなたが望む唯一の方法はサービスを使用することです。単に、あなたのコンポーネントで後

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

を書くmyVariable変数の値を取得するには、このサービスを使用しています複雑ではないです。 HTMLは自動的に変更した後、自分自身をリフレッシュする必要があります - あなたは、デフォルトで

//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" 
    } 
    }