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

我有一个问题和这里问的问题非常相似。我使用的是角省道，有一个任务栏组件，我想用任务组件列表填充它。我想在按下按钮时添加一个新的任务组件。这是我目前拥有的代码

task_bar_component.html

{{task}}

task_bar_component.dart

@组件(
可见性：Directive.CHILDREN\u可见性，
选择器：“任务栏”，
templateUrl:“../lib/components/taskbar_component.html”，
出版物：“taskbarCmp”，
useShadowDom:false）
类TaskBarComponent{
列出任务；
TaskBarComponent（）{
任务=新列表（）；
}
void addTask（）{
var newTask=新任务组件（）；
任务。添加（newTask）；
}
}

task_component.dart

@组件(
可见性：Directive.CHILDREN\u可见性，
选择器：“任务”，
templateUrl:“../lib/components/task_component.html”，
出版：taskCmp，
useShadowDom:false）
类任务组件{
bool _=true；
int _lopCount=0；
int _geoCount=0；
int_体积=1；
字符串id；
TaskComponent（）{
折叠。使用（）；
}
}

---

此代码当前在单击按钮时将“TaskComponent”的实例添加到html中，但它不包含实际的task_component.html。我尝试使用上一个问题中解决方案中的ShadowRootAware，但不确定按下按钮时如何调用onShadowRoot。我还尝试使用该帖子中建议的指令解决方案，但也存在同样的问题，即按下按钮时无法创建组件。如果您有任何建议，我们将不胜感激。

我会建议更多类似的建议

{{task.caption}}实际上，您的代码不起作用，因为

{{task}}

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

要获得您想要的行为，您需要执行以下操作：

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);
  }
}

类任务{
//在你的任务中你想要什么
}
@组成部分(
可见性：Directive.CHILDREN\u可见性，
选择器：“任务”，
templateUrl:“../lib/components/task_component.html”，
出版：taskCmp，
useShadowDom:false）
类任务组件{
@NgTwoWay（‘任务’）
任务；
//任务视图需要什么
TaskComponent（）{
折叠。使用（）；
}
}
//任务栏
类TaskBarComponent{
列出任务；
TaskBarComponent（）{
任务=新列表（）；
}
void addTask（）{
var newTask=新任务（）；
任务。添加（newTask）；
}
}

在您的html中：

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






在这种情况下，您已将逻辑与视图完全分离，并获得角度组件的模块化
，即使这是可能的（如您在链接问题中所看到的），我强烈建议不要采用这种方法。为什么不能将所有HTML放入模板（在repeat中）并从组件的集合中提取动态部分（id、名称、文本等）？这样，你的工作是有角度的，而不是反对它。