首页 文章

Angular 4 - 从子组件调用父方法不起作用

提问于
浏览 次
4

我的所有事件 Launcher 都正常工作，除了一个 .

child.ts:

@Component({
    ... 
    outputs: ['fileUploaded']
    })

export class childComponent implements OnInit {
  ...
  fileUploaded = new EventEmitter<boolean>();
  ...
  randomMethod(){
     ...
     this.fileUploaded.emit(true);
  }

}

从父组件调用randomMethod（），我将在parent.ts中显示 . 它不是在child.html中调用的 .

parent.html

...
<child (fileUploaded)="onSubmit($event)"></child>
..

parent.ts

export class parentComponent {
   ...
   theChild = new childComponent;
   submitted = false;
   ...
   onSubmit(event: boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }

  functionCallsChild(){
     this.theChild.randomMethod();
     ...
     this.theChild = new childComponent;
  }
}

我的应用程序从不记录“inSubmit（）”，为什么不调用此方法？我也尝试不在我的最后一行创建一个新的子对象，但这没有什么区别 .

angular typescript data-binding eventemitter

5 回答

  • 1

    您可以使用@Output Launcher 从子组件调用父组件的方法，该 Launcher 将触发子组件上的任何事件 . 我在评论部分使用这种方法来使用子组件的方法更新父组件中的计数 .

    Parent.ts

    /** Update the count from child component */
UpdateCount(id) {
this.getTotalCommentCountByGroupId(id);
}

    Parent.HTML

    <srv-group-feed [LiveFeedInput]="groupPostRes" 
 (CommentCount)="UpdateCount($event)"></srv-group-feed>

    Child.ts

    this.CommentCount.emit(data you need to pass);

    在全局范围内，您可以在子组件中声明@Output事件，即child.ts

    @Output() CommentCount = new EventEmitter<string>();
    回复于
  • 0

    您不应该使用new运算符创建子组件 .

    您应该使用 @ViewChild() 来引用子组件 .

    回复于
  • 0

    试试这种方式：

    @Output()
  fileUploaded = new EventEmitter<boolean>();

    并删除：

    outputs: ['fileUploaded']

    检查文档here！ ：d

    回复于
  • -1

    也许我没有't clear why you choose this approach or what you need it for, but as far as I know, you'应该使用从孩子到其父母的 EventEmitter . 这意味着将触发.emit（）shold的事件放在child.html中 . 尝试这样做，它应该工作：

    child.html

    <div (click-or-whatever-fires-what-you-want)="randomMethod()"></div>

    child.ts:

    @Component({
    ... 
    })

export class childComponent implements OnInit {
  ...
  @Output() fileUploaded = new EventEmitter<boolean>();
  ...
  randomMethod(){
     ...
     this.fileUploaded.emit(true);
  }

}

    parent.html

    ...
<child (fileUploaded)="onSubmit($event)"></child>
..

    parent.ts

    export class parentComponent {
   ...
   submitted = false;
   ...
   onSubmit(event: boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }
}

    希望它有所帮助 .

    回复于
  • 7

    您选择的子组件是错误的，您应该使用 ViewChild 这样：

    parent.html:

    <child #theChild (fileUploaded)="onSubmit($event)"></child>

    parent.ts:

    export class parentComponent {
   ...
   @ViewChild('theChild') theChild;
   submitted = false;
   ...
   onSubmit(event: boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }

  functionCallsChild(){
     this.theChild.randomMethod();
     ...
  }
}
    回复于

相关问题