Используя Angular, как я могу динамически добавить компонент по щелчку?(Не только один) - PullRequest
Новая
       34

Используя Angular, как я могу динамически добавить компонент по щелчку?(Не только один)

1 голос
/ 12 апреля 2019

Чтобы выучить Angular, я пишу список дел. Я создал компонентную задачу с параметрами title (имя задачи) и status (логическое значение, относящееся к входу флажка). 

<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, но я просто не могу понять это.

Пример углового документа не может помочь.

Вот мой appTaskDirective файл: 

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

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

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

Спасибо.

1 Ответ

0 голосов
/ 12 апреля 2019

Прежде всего, вы не можете передать директиву событию 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');
}

Надеюсь, это поможет:)

...