父html怎么调用子html方法,如何从父组件调用html事件方法到子组件

我有以下父组件。

JS

import { Component, OnInit } from '@angular/core';

import { TaskService } from '../task.service';

import { ViewChild } from '@angular/core/src/metadata/di';

import { CreateNewTaskComponent } from '../create-new-task/create-new-task.component';

@Component({

selector: 'task-list',

templateUrl: './task-list.component.html',

styleUrls: ['./task-list.component.css']

})

export class TaskListComponent implements OnInit {

tasks = [{}];

constructor(public taskService: TaskService) {

debugger;

this.tasks = taskService.tasks;

}

ngOnInit() {

}

completeTask(task){

task.completed = true;

}

}

HTML

Completed Task List

Task Title	Task Status	Actions
No Record To Display
{{task.title}}	{{task.completed ? 'Completed' : 'Pending'}}	Complete Edit

上面是从父组件到子组件的事件绑定调用editTask()。

以下是子组件

JS

import { Component, OnInit } from '@angular/core';

import { TaskService } from '../task.service';

@Component({

selector: 'create-new-task',

templateUrl: './create-new-task.component.html',

styleUrls: ['./create-new-task.component.css']

})

export class CreateNewTaskComponent implements OnInit {

task;

constructor(public taskService: TaskService) {

this.task = {id:0, title: '', completed: false};

}

ngOnInit() {

}

createTask(){

debugger;

this.task.completed = false;

this.task.id = this.taskService.tasks.length;

this.taskService.tasks.push(this.task);

this.task = {id:0, title: '', completed: false};

}

editTask(task){

alert("Called");

}

}

HTML

Create New Task

---

Save

现在，当我点击父组件编辑按钮时，我收到以下错误：

错误TypeError：Object不支持属性或方法'editTask'

请帮忙！