在 Angular 上的另一个组件（between.ts 文件）中使用一个变量

Question

So basically I have a todo list being added dynamically and I want to exclude the items, however the list itself is outside the task component:

In the task.component.html, the list is being iterated to be displayed:

<ul class="list-group" *ngFor="let taskElement of taskElements; let i=index" [taskElement]="taskElement">
<div class="d-flex justify-content-center">
    <li class="list-group-item">
        <span>
            {{element.description}}
        </span>
        <button class="btn btn-danger" style="float: right;" type="button">Remove
            Task</button>
    </li>

However the list is defined on the file app.component.ts:

public containsTask = false;
  taskElements: { description: string, isDone: boolean }[] = [];

  onTaskCreated(taskData: { taskDescription: string }) {
    this.taskElements.push({
      description: taskData.taskDescription,
      isDone: false
    });
    this.containsTask = true;
  }

How can I use the array taskElements (declared in app.component.ts) in the task.component.ts?

Thanks!

Answer 1

You can use a service to centralise the data. The service can then be injected into both components and this way you can access the array defined inside of the service.