Question

我有一个与继承和显示模态对话框相关的问题。我正在使用Angular Dart并且不确定如何完成我想要的任务。我找不到任何有用的例子是不成功的。

我目前有一个抽象基类Task类和一个扩展Task类的TaskA类。两者都是NgTwoWay组件。主html只是一个简单的表单，上面有一个按钮。单击按钮时，我想要显示模式对话框。此模式将是TaskA或TaskB中的一个，具体取决于创建的任务类型。当我尝试从扩展类中显示模态时，会出现问题。我不认为TaskAComponent正在创建，因此html无法访问或尚不存在。我也试过使TaskComponent抽象和TaskAComponent从它扩展，但后来没有任何任务html出现。

以下是我目前的代码。

task_component.dart

abstract class Task {
  Scope _scope;

  Task([this._scope]) {
  }

  void displayProperties();
}

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

class TaskComponent {
  @NgTwoWay('task')
  Task task;
  Scope _scope;

  TaskComponent([this._scope]) {

  }

  void displayProperties() {
    task.displayProperties(); 
  }
}

task_A_component.dart

class TaskA extends Task {
  Scope _scope;

  TaskA([this._scope]) {
    Modal.use();
  }

  void displayProperties() {  
    Modal myWindow;
    var readComplete = querySelector('#taskA_Modal');

    myWindow = new Modal(readComplete);
    myWindow.show();   
  }
}

@Component(
    visibility: Directive.CHILDREN_VISIBILITY,
    selector: 'taskA',
    templateUrl: '../lib/components/task_A_component.html',
    publishAs: 'taskACmp',
    useShadowDom: false)

class TaskAComponent {
  @NgTwoWay('taskA')
  TaskA taskA;
  Scope _scopeA;

  TaskAComponent([this._scopeA]) {
    Modal.use();
  }

  void displayProperties() {
    taskA.displayProperties(); 
  }
}

有没有人有任何想法我做错了什么？是否有可能完成我想要做的事情？

Answer 1

使用ng-switch有条件地创建您选择的组件

EX：

<div ng-switch="ctrl.task.runtimeType">
    <div ng-switch-when="Task">
        <task task="ctrl.task"></task>
    </div>
    <div ng-switch-when="TaskA">
        <taskA taskA="ctrl.task"></taskA>
    </div>
</div>

我的回答很晚但我希望它可以提供帮助

如何在Angular Dart中显示来自继承类的不同模态对话框

1 个答案: