Emitter 서비스 angular2에서 subscribe를 사용하여 ts 파일에서 데이터를 다시 검색하지만 html로 데이터를 표시하지 않습니다.

Question

저는 2 번 각도입니다. 저는 2 개의 compnents를 가지고 있는데 하나는 텍스트 필드가있는 searchcomponent이고 다른 하나는 displayComponent입니다. 입력 필드에서 일부 값을 입력 한 후 enter 키를 눌러 eventemitter 서비스 (@input 및 @output과 함께 사용하지 않음)를 사용하여 displaycomponent에 표시해야합니다. 이미지 점검

코드는 searchComponent.html

<div>Search and clear</div> 
<input type="text" value="{{inputTerm}}" (keyup.enter)="alertInput(input1.value)" #input1/> 

searchComponent.ts

emitter.service.ts

import {EventEmitter, Injectable} from '@angular/core'; 


@Injectable() 
export class EmitterService { 
    private static _emitters: { [channel: string]: EventEmitter<any> } = {}; 
    static get(channel: string): EventEmitter<any> { 
    if (!this._emitters[channel]) 
     this._emitters[channel] = new EventEmitter(); 
    return this._emitters[channel]; 
    } 
} 

입니다

import {Component} from '@angular/core'; 
import {EmitterService} from '../emitter.service'; 


@Component({ 
    selector: 'search', 
    templateUrl: './Task1-search.html' 
}) 
export class SearchComponent { 

    inputTerm:string; 
    menubarEmitter = EmitterService.get("displayText"); 

    alertInput(val1){ 
     this.inputTerm=val1 
     alert("user clicked enter to see input value is "+this.inputTerm); 
     this.menubarEmitter.emit({"InputText":this.inputTerm}); 
    }  
} 

,363,210

displaycomponent.html

<div>The name entered in input field is {{displayValue}}</div> 

dispalycomponent.ts

import {Component} from '@angular/core'; 
import {EmitterService} from '../emitter.service'; 

@Component({ 
    selector: 'display', 
    templateUrl: './Display-input.html', 

}) 
export class DisplayComponent { 

    displayValue:string; 
    menubarEmitter = EmitterService.get("displayText"); 

    constructor(){ 
    this.menubarEmitter.map((res:any)=>res).subscribe(val => { 
     if(val.InputText==undefined || val.InputText==""){ 
     // this.displayValue=val.InputText; 
     console.log("wrong"); 
     } 
     else{ 
     console.log("right"); 
     this.displayValue=val.InputText; 

     } 
     console.log("display "+this.displayValue); 
    }); 
    } 
} 

package.json

{ 
    "name": "angular2-seed", 
    "version": "1.0.0", 
    "description": "A simple starter Angular2 project", 
    "scripts": { 
    "build": "webpack --inline --colors --progress --display-error-details --display-cached", 
    "watch": "npm run build -- --watch", 
    "server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base src", 
    "start": "npm run server" 
    }, 
    "contributors": [ 
    "Rob Wormald <robwormald@gmail.com>", 
    "PatrickJS <github@gdi2290.com>" 
    ], 
    "license": "MIT", 
    "devDependencies": { 
    "@types/core-js": "^0.9.32", 
    "@types/node": "^6.0.38", 
    "angular2-template-loader": "^0.4.0", 
    "awesome-typescript-loader": "^1.1.1", 
    "css-loader": "^0.23.1", 
    "raw-loader": "^0.5.1", 
    "to-string-loader": "^1.1.4", 
    "typescript": "^2.0.2", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0", 
    "webpack-merge": "^0.8.4" 
    }, 
    "dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/platform-server": "2.0.0", 
    "@angular/router": "3.0.0", 
    "@angular/upgrade": "2.0.0", 
    "core-js": "^2.4.1", 
    "ie-shim": "^0.1.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "~0.6.23", 
    "angular2-in-memory-web-api": "0.0.20", 
    "bootstrap": "^3.3.7" 
    }, 
    "keywords": [ 
    "Angular2", 
    "angular2-seed", 
    "official angular 2 seed", 
    "official angular2 seed" 
    ], 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/angular/angular2-seed.git" 
    }, 
    "bugs": { 
    "url": "https://github.com/angular/angular2-seed/issues" 
    }, 
    "homepage": "https://github.com/angular/angular2-seed#readme" 
} 

app.module.ts

import {NgModule} from '@angular/core' 
import {RouterModule} from "@angular/router"; 
import {rootRouterConfig} from "./app.routes"; 
import {AppComponent} from "./app.component"; 
import {GithubService} from "./github/shared/github.service"; 
import {FormsModule} from "@angular/forms"; 
import {BrowserModule} from "@angular/platform-browser"; 
import {HttpModule} from "@angular/http"; 
import {AboutComponent} from './about/about.component'; 
import {HomeComponent} from './home/home.component'; 
import {RepoBrowserComponent} from './github/repo-browser/repo-browser.component'; 
import {RepoListComponent} from './github/repo-list/repo-list.component'; 
import {RepoDetailComponent} from './github/repo-detail/repo-detail.component'; 
import {LocationStrategy, HashLocationStrategy} from '@angular/common'; 
import {EventEmitter, Injectable} from '@angular/core'; 

import {SearchComponent} from "./Task1-search/Task1-search"; 
import {DisplayComponent} from "./Display-input/Display-input"; 
import {EmitterService} from "./emitter.service"; 

@NgModule({ 
    declarations: [AppComponent, AboutComponent, RepoBrowserComponent, RepoListComponent, RepoDetailComponent, HomeComponent, SearchComponent, DisplayComponent], 
    imports  : [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig)], 
    providers : [GithubService, {provide: LocationStrategy, useClass: HashLocationStrategy}, EmitterService], 
    bootstrap : [AppComponent] 
}) 
export class AppModule { 

} 

AP p.component.ts

import {Component} '@ angular/core'에서 가져 오기;

@Component({ 
    selector : 'app', 
    templateUrl: './app.component.html', 
}) 
export class AppComponent { 
} 

app.component.html

<h3> 
    Angular 2 Seed 
</h3> 
<nav> 
    <!--<a [routerLink]="['/']"> 
    Home 
    </a> 
    | 
    <a [routerLink]="['/about']"> 
    About 
    </a>--> 
    | 
    <a [routerLink]="['/search']"> 
    Search 
    </a> 
    | 
    <a [routerLink]="['/display']"> 
    Display 
    </a> 
    | 
    <!--<a [routerLink]="['/github', 'angular']"> 
    Github Repos 
    </a>--> 
</nav> 

<main> 
    <router-outlet></router-outlet> 
</main> 


<footer> 
    © 2016 
</footer> 

사람은 이러한 문제를 해결하기 위해 도와주세요 수 있습니다. 고맙습니다.

Answer 1

ChangeDetectorRef이

constructor(private changeDetectorRef: ChangeDetectorRef) { 
    this.menubarEmitter.map((res:any)=>res).subscribe(val => { 
    if(val.InputText==undefined || val.InputText=="") { 
     console.log("wrong"); 
    } else { 
     console.log("right"); 
     this.displayValue=val.InputText; 
     this.changeDetectorRef.detectChanges(); 
    } 
    console.log("display "+this.displayValue); 
    }); 
}