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"

控制台显示新字符串，但名称不会更改

组件之间的Angular2通信

1 个答案: