使用Angular，如何在点击时动态添加组件？ （不仅一个）

Question

要学习Angular我正在编写待办事项列表。我创建了一个组件任务，其中包含标题（任务名称）和状态（与复选框输入相关的布尔值）参数。

<div>
  <div>{{title}} <button>Edit</button></div>
  <input type="checkbox" value={{status}}>
</div>

我还创建了一个ToDoList组件，其中包含一个标题（待办事项列表的名称，以及一个带有任务名称列表的选项卡，以使用*ngFor生成多个任务组件。

<div>
  <h1>{{title}}</h1>
  <app-task *ngFor="let title of list" [title]="title" status="true"></app-task>
  <button (click)="appTaskDirective">Add a task</button>
</div>

现在我想在使用appTaskDirective时单击“添加任务按钮”添加动态任务组件，但我无法弄明白。

角度document example无法帮助。

这是我的appTaskDirective文件：

import { Directive, ViewContainerRef, TemplateRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appTaskDirective]'
})

export class TaskDirectiveDirective implements OnInit {
  constructor(public viewContainer:ViewContainerRef) { }
}

谢谢。

Answer 1

首先，您无法将指令传递给click事件。如果要使用该指令来侦听click事件，则必须将hostlistener附加到指令中，如下所示

在指令中

import { Directive, ViewContainerRef, TemplateRef, OnInitHostListener } from '@angular/core';

@Directive({
  selector: '[appTaskDirective]'
})

export class TaskDirectiveDirective implements OnInit {
  constructor(public viewContainer:ViewContainerRef) { }
    @HostListener('click') onClick() {
     // do something
    }
}

在组件中

<div>
  <h1>{{title}}</h1>
  <app-task *ngFor="let title of list" [title]="title" status="true"></app-task>
  <button appTaskDirective>Add a task</button>
</div>

但我不明白为什么你需要做所有这些。您可以只听取组件中的事件并相应地更新任务列表

在组件html中

<div>
 <h1>{{title}}</h1>
 <app-task *ngFor="let title of list" [title]="title" status="true"></app-task>
 <button (click)="addNewTask()">Add a task</button>
</div>

在组件ts中

addNewTask() {
   this.list.push('A new Task');
}

希望这可以帮助 ：）