Question

我遇到的问题与此处How to add a component programatically in Angular.Dart?非常相似。我正在使用Angular Dart并且有一个任务栏组件，我想填充一个任务组件列表。我希望在按下按钮时添加一个新的任务组件。这是我目前的代码。

task_bar_component.html

<ul id="taskList" class="taskBar-items">
    <li ng-repeat="task in taskbarCmp.tasks">
        {{task}}
    </li>
</ul>

task_bar_component.dart

@Component(
    visibility: Directive.CHILDREN_VISIBILITY,
    selector: 'taskbar',
    templateUrl: '../lib/components/taskbar_component.html',
    publishAs: 'taskbarCmp',
    useShadowDom: false)

class TaskBarComponent {
  List tasks;

  TaskBarComponent() {
    tasks = new List();
  }

  void addTask() {
    var newTask = new TaskComponent();
    tasks.add(newTask);
  }
}

task_component.dart

@Component(
    visibility: Directive.CHILDREN_VISIBILITY,
    selector: 'task',
    templateUrl: '../lib/components/task_component.html',
    publishAs: 'taskCmp',
    useShadowDom: false)

class TaskComponent {
  bool _collapsed = true;
  int _lopCount = 0;
  int _geoCount = 0;
  int _volume = 1;
  String id;

  TaskComponent() {
    Collapse.use();
  }
}

此代码目前添加了一个＆＃34;任务组件实例＆＃34;＆＃34;单击按钮上的html，但它不包含实际的task_component.html。我尝试使用上一个问题解决方案中的ShadowRootAware但不确定按下按钮时如何调用onShadowRoot。我也尝试使用该帖子中建议的指令解决方案，并且遇到了同样的问题，在按下按钮时无法创建组件。非常感谢任何建议。

Answer 1

实际上，您的代码不起作用，因为

{{任务}}

不要调用您的组件的视图，它会尝试直接显示该对象，而这不是您想要的。

要获得您想要的行为，您需要做更多这样的事情：

class Task {
   // What you want in your task
}

@Component(
   visibility: Directive.CHILDREN_VISIBILITY,
   selector: 'task',
   templateUrl: '../lib/components/task_component.html',
   publishAs: 'taskCmp',
   useShadowDom: false)

class TaskComponent {
  @NgTwoWay('task')
  Task task;
  // What you want for you task view

  TaskComponent() {
    Collapse.use();
  }
}


// task bar
class TaskBarComponent {
  List<Task> tasks;

  TaskBarComponent() {
    tasks = new List();
  }

  void addTask() {
     var newTask = new Task();
     tasks.add(newTask);
  }
}

并在你的HTML中：

<ul id="taskList" class="taskBar-items">
   <li ng-repeat="task in taskbarCmp.tasks">
      <task task="task"></task>
   </li>
</ul>

在这种情况下，您可以完全将逻辑与视图分开，并获得Angular Component的模块性

Answer 2

我建议更多像

<ul id="taskList" class="taskBar-items">
    <li ng-repeat="task in taskbarCmp.tasks">
        <task id={{task.id}}><div class="task-caption">{{task.caption}}</div><div class="task-description>{{task.description}}</div></task>
    </li>
</ul>

并且组件中的任务集合包含Task类的实例，其中包含定义任务的数据属性（例如我在示例中使用的id，caption和text属性）。

在Angular Dart中单击按钮时动态创建和添加新组件

2 个答案: