angular2 - ngIf値がDOMで更新されない

Question

DOMの値を更新する際に問題が発生しています。

私は現在、2つのコンポーネント（AとB）を持っています。

<A> 
    <template> 
     <div *ngFor="let item of items" (click)="selected($event, item)"> 
      <span>{{item.name}}<span> 
     </div> 
    </template> 
</A> 

そしてAの図のようなある：Bは、鋳型としてAのビューを使用するだけでなく、（NG-コンテンツ）にそのテンプレートを注入するようにBの図のようなある、Aから継承

<ng-content select="template"></ng-content> 
<div *ngIf="searching">Hey I'm looking for answer</div> 
<div *ngIf="!searching">I already have my answer</div> 

成分this.selectedItemが機能変更

private searching: boolean = true; 

selected(event, value: any): void { 
    event.stopPropagation(); 
    this.searching = false; // This.searching is updated in component but not in DOM 
    this.selectedItem = value; // BUT this.selectedItem is updated in component AND in DOM !! 
} 

が、this.searchingんではないため、唯一の「はい」：Bは、項目の配列であり、Aの成分であるBによって呼び出される1つの具体的な方法を持っている唯一のプライベート変数を持っています検索は常にTRUEなので表示されます。

ここにはplunkrがあります。

誰かが私を啓発できますか？ありがとうございました。

Answer 1

親クラスのメソッドを子クラスで使うことができるので、コード化したのとは違って動作します。タイプスクリプトextendsとng-contentについて詳しくは分かりません。 extendsng-content機能と範囲<template-example>を参照してください。興味がある可能性人のために

import {Component, NgModule} from '@angular/core' 
    import {BrowserModule} from '@angular/platform-browser' 
    declare var searching: boolean 
    @Component({ 
     selector: 'my-app', 
     template: `<ng-content select="template-example"></ng-content>`, 
    }) 
    export class App { 
     private searching: boolean = true; 
     private selectedItem: any; 

     constructor(private zone:NgZone) { 
     } 

     selected(event, value: any) { 
     event.stopPropagation(); 


      this.searching = !this.searching; 
     console.log(this.searching); 
     this.selectedItem = value; 
     } 
    } 


    @Component({ 
     selector: 'app-inheritent', 
     template: ` 
      <my-app> 
      <template-example> 
       <div *ngFor="let item of items" (click)="selected($event, item)"> 
       <a>{{item.name}}</a> 
       </div> 
       <div *ngIf="!searching"> 
        <span>Nope.</span> 
       </div> 

       <div *ngIf="searching"> 
        <span>Yes</span> 
       </div> 
      </template-example> 
      </my-app>` , 
    }) 
    export class AppInheritent extends App { 

     private items: any = [ 
     {name: "1"}, 
     {name: "2"}, 
     {name: "3"}, 
     {name: "4"}, 
     {name: "5"}, 
     ]; 

     constructor() { 
     } 


    } 

    @NgModule({ 
     imports: [ BrowserModule ], 
     declarations: [ App, AppInheritent ], 
     bootstrap: [ AppInheritent ], 
     schemas: [ NO_ERRORS_SCHEMA ] 
    }) 
    export class AppModule {} 

Answer 2

...私は最終的に、@ k11k2と@Hareeshへの答えのおかげを見つけた私を啓発（私は最終的にあなたの答えを理解）が、拡張のため、これは完全ではありません。 - ありがとう。

は最初から私の考えを混乱させるだけです。 私の例では、コンポーネントB（app-inheritent）にコンポーネントA（my-app）をインスタンス化しました。 がに拡張されているため、コンポーネントAとBがシェアと同じ変数と同じコンテキストだと考えましたが、は絶対にではありません。

呼び出し元のコンポーネントでは、すでにのコンテキストがあり、この後者をAで拡張すると、2つのコンポーネントは同じ構造を共有します。

しかし、私たちは別のコンテキストを持っているので、それ自体はAを呼び出しています。 AはBと同じ構造を持っていますが、関係はありません。

私が選択した関数を呼び出したとき、Bは実際にインスタンス化されたAコンポーネントの機能ではなく、PARENT選択されたメソッドを呼び出しました！

@Hareeshが言っているように、私たちは今や複数のコンポーネントを持っています。値を変更する唯一の方法は、それらを互いに通信させることです。