Angularを使用して、クリック時にコンポーネントを動的に追加するにはどうすればよいですか？（1つだけではありません）

debugcn 投稿 Dev

書きます

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が、理解できません。

角度のあるドキュメントの例は役に立ちません。

これが私のappTaskDirectiveファイルです：

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

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

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

ありがとう。

ジョセフ・ビシリユ

まず第一に、クリックイベントにディレクティブを渡すことはできません。ディレクティブを使用してクリックイベントをリッスンする場合は、次のようにディレクティブに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');
}

お役に立てれば：）

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-10

コメントを追加

サインイン

Related 関連記事

記事