Angular2組件間的通信

我搜索一下與Angular2組件我嘗試在此模式下，但沒有按之間的通信科技工作Angular2組件間的通信

模板variantpages.component.html內容本

<button (click)="changetext()">Change</button> 
<child></child> 



@Component({ 
    selector: 'menu-left', 
    templateUrl: './app/pages/variantpages.component.html' 
}) 

export class AppComponent{ 


child = new ChildComponent(); 


changetext(){ this.child.changetext2()} 

}

@Component({ 
    selector: 'child', 
    template: `<p>page of {{ pageCount }}</p>` 
}) 

export class ChildComponent{ 

@Input() photo:string = "ciao ciao"; 

@Output() valueChange = new EventEmitter(); 


pageCount:number; 
constructor(){ this.pageCount = 0; } 

changetext2(){ 
     this.pageCount++; 
     this.valueChange.emit(this.pageCount); 
     console.log(this.pageCount); 
    } 
}

所以控制檯日誌顯示增量編號，但pageCount停留0

謝謝

來源

2017-04-09 corsaro

那麼你的HTML中包含更新後 – Aravind

不看太密切（這意味着有可能是其他的問題），但發現以下...檢查*「家長監聽子女事件」 *和正確使用輸出到這個鏈接：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child請注意該例子中的childtag。提示：''是不夠的;），並使用'ViewChild'的@代替'孩子=新ChildComponent（）;'鏈接我提供的地址這兩個問題;） – Alex

喜感謝回答我把HTML的一部分，問題是組件調用方法changetext2，我看到在控制檯中的增量，但不改變在頁面 – corsaro

好吧，我解決了EventEmitter但這項工作只能由父母和孩子，現在我的問題是在A組份期不同，如果我有兩個不同的組成部分，我想用一個按鈕（點擊）來改變串在B組份，我把這種方法的setName

組分A

constructor(private appComponent: AppComponent){ } 
setName(newName: string) { 
     this.appComponent.name = newName; 
     console.log(this.name); 
     }

組分B

@Input() name: string = "Angular3"

控制檯顯示新的字符串，但該名稱不會改變

來源

2017-04-13 12:18:27 corsaro

您可以使用共享服務類來進行這種類型的通信。有關更多信息，請參閱：https://angular.io/docs/ts/latest/cookbook/component-communication.html – Brandon

Angular2組件間的通信

回答

相關問題