AngularDart对话服务

Question

我需要在ngFor循环中的组件中打开一个对话框（模态）。我很确定在我的组件中重复模态不是答案。

我正在寻找一种在AngulatDart中使用Dialog服务的方法，在Angular2（TS）中我会做类似的事情：

@Injectable()
export class MyDialogService {
  constructor(private dialog: MdDialog) {
  }

  public openDialog() {
    let dialogRef: MdDialogRef<MyDialogComponent>;
    dialogRef = this.dialog.open(MyDialogComponent);
    return dialogRef.afterClosed();
  }
}

我没有找到在AngularDart中做同样事情的方法

Answer 1

正如Gunter所说，AngularDart组件中没有提供“DialogService”。您可以提交功能请求，但我想创建这样的服务非常简单 - 您可以在根级别组件中添加<material-dialog>，并将根组件作为可注入服务公开以显示或隐藏它。

Answer 2

根据Günter和matanlurey的建议，我最终创建了一个带LazyEventEmitter的简单服务来触发对话：

dialog_service.dart

@Injectable()
class DialogService {
  final LazyEventEmitter<bool> modalEvents = new LazyEventEmitter<bool>();

  DialogService() {
  }

  void openDialog() {
    modalEvents.add(true);
  }
}

父组件（例如AppComponent）包含Dialog组件：

dialog_component.html

<modal [(visible)]="showDialog">
  <material-dialog headered class="headered-dialog">
    [...]
  </material-dialog>
</modal>

dialog_component.dart

@Component(
  selector: 'my-dialog',
  styleUrls: const ['dialog_component.css'],
  templateUrl: 'dialog_component.html',
  directives: const [materialDirectives],
  providers: const [materialProviders]
)
class DialogComponent implements OnInit {
  final DialogService _dialogService;
  bool showDialog = false;

  DialogComponent(this._dialogService);

  @override
  ngOnInit() {
    _dialogService.modalEvents.listen((showDialog) {
      this.showDialog = showDialog;
    });
  }
}