将Angular 2升级至Angular 5：TypeScript中Dialog控制器写法疑问

嘿，我完全懂你现在的处境——一边要把旧Angular应用升级到Angular 5，一边还要跟不太熟悉的TypeScript打交道，网上的资料又零散，确实头疼。让我一步步帮你解决这两个问题：

一、把AngularJS风格的控制器函数转成TypeScript写法 #

首先得明确：Angular 5已经抛弃了AngularJS里的$scope和$modalInstance这类依赖注入方式，转而采用组件化的模态框实现。不过如果你的旧代码是用类似UI Bootstrap的$modal服务，升级后可以对应使用ng-bootstrap或Angular Material的对话框组件，下面是具体的TypeScript实现方式：

1. 创建模态框组件（替代原控制器函数） #

我们不再写单独的控制器函数，而是把模态框的逻辑封装成一个Angular组件：

import { Component, Inject } from '@angular/core';
// 如果你用Angular Material的对话框
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
// 如果你用ng-bootstrap的对话框，替换成下面这行
// import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-custom-dialog',
  templateUrl: './custom-dialog.component.html' // 模态框的HTML模板
})
export class CustomDialogComponent {
  // Angular Material的写法：注入对话框引用和传入的数据
  constructor(
    public dialogRef: MatDialogRef<CustomDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public dialogData: any // 接收从外部传入的数据
  ) {}

  // ng-bootstrap的写法：
  // constructor(public activeModal: NgbActiveModal, @Inject(MAT_DIALOG_DATA) public dialogData: any) {}

  // 确认按钮逻辑，对应原$modalInstance.close()
  handleConfirm(): void {
    this.dialogRef.close('用户点击了确认');
    // ng-bootstrap版本：this.activeModal.close('用户点击了确认');
  }

  // 取消按钮逻辑，对应原$modalInstance.dismiss()
  handleCancel(): void {
    this.dialogRef.close('用户点击了取消');
    // ng-bootstrap版本：this.activeModal.dismiss('用户点击了取消');
  }
}

2. 在服务中调用模态框 #

然后在你的Dialog服务里，用Angular的对话框服务打开这个组件：

import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
// ng-bootstrap版本替换成：import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { CustomDialogComponent } from './custom-dialog.component';

@Injectable({ providedIn: 'root' })
export class DialogService {
  constructor(private dialog: MatDialog) {}
  // ng-bootstrap版本：constructor(private modalService: NgbModal) {}

  openCustomDialog(data?: any): void {
    // Angular Material打开模态框
    const dialogRef = this.dialog.open(CustomDialogComponent, {
      width: '400px',
      data: data || {} // 传入数据到模态框组件
    });

    // ng-bootstrap版本：
    // const modalRef = this.modalService.open(CustomDialogComponent);
    // modalRef.componentInstance.dialogData = data || {};

    // 监听模态框关闭事件
    dialogRef.afterClosed().subscribe(result => {
      console.log('模态框已关闭，返回结果:', result);
    });
  }
}

和旧写法对比：

• 原$scope上的绑定数据，直接换成组件类的属性（比如上面的dialogData），模板里用双向绑定即可，不需要依赖$scope。
• 原$modalInstance的关闭/取消功能，被MatDialogRef或NgbActiveModal替代，更符合Angular的组件化思想。

二、处理.controller属性未定义的TypeScript报错 #

TypeScript是强类型语言，如果tempModalDefaults对象的类型里没有声明controller属性，直接赋值会触发类型错误。这里有几种优雅的处理方式：

1. 扩展类型定义（推荐） #

如果tempModalDefaults是某个第三方库的对象，你可以创建一个自定义类型声明文件（比如typings/custom.d.ts）来扩展它的类型：

// 假设原类型名为ModalDefaults
declare interface ModalDefaults {
  controller?: (scope: any, modalInstance: any) => void;
  // 这里可以添加其他已有的属性
}

这样TypeScript就会识别controller属性，不会再报错。

2. 临时用类型断言快速解决 #

如果只是临时调试或者不想修改全局类型，可以用类型断言告诉TypeScript这个对象确实有controller属性：

// 用any断言（最简单，但会失去类型检查）
(tempModalDefaults as any).controller = ($scope: any, $modalInstance: any) => {
  // 原控制器逻辑
  $scope.message = 'Hello from dialog';
  $modalInstance.close('done');
};

// 或者更精确的断言（保留部分类型检查）
interface ModalWithController {
  controller: (scope: { message: string }, modalInstance: { close: (res: string) => void }) => void;
}

(tempModalDefaults as ModalWithController).controller = ($scope, $modalInstance) => {
  $scope.message = 'Hello from dialog';
  $modalInstance.close('done');
};

3. 给自定义对象定义完整类型 #

如果tempModalDefaults是你自己创建的对象，一开始就给它定义正确的类型：

interface ModalDefaults {
  // 定义其他必要属性
  width?: string;
  // 声明controller属性为可选的函数类型
  controller?: (scope: any, modalInstance: any) => void;
}

// 初始化对象时指定类型
const tempModalDefaults: ModalDefaults = {
  width: '300px'
};

// 现在赋值controller不会报错了
tempModalDefaults.controller = ($scope, $modalInstance) => {
  // 控制器逻辑
};

最后提醒一句：升级到Angular 5后，尽量用组件替代传统的控制器函数，这不仅更符合Angular的设计理念，也能更好地发挥TypeScript的类型检查优势，减少后续维护的麻烦。

内容的提问来源于stack exchange，提问作者yams