Angular2组件之间的通信

Question

我用 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

谢谢

Answer 1

好的，我用 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"

控制台显示新字符串，但名称不变