TypeScript调用openModalDialog报Cannot find name 'content'错误

报错核心原因 #

• 直接触发Cannot find name 'content'报错的原因：当前所有可访问的作用域内，从未定义过名为content的变量
  你在navigateToApp里调用this.openModalDialog(content)时，既没有在类的成员属性里声明过content，也没有在axios回调的本地作用域里给content赋值，TypeScript 找不到这个变量的声明来源，自然会抛出未定义错误。
  通常这个content是传给模态框的内容载体，可能是模板引用、组件类、动态DOM节点，不管是哪种，都需要提前明确声明这个变量的位置和类型，不能直接写一个裸的变量名就作为入参传递。
• 隐藏的逻辑隐患：axios 回调的 this 指向错误
  你当前的 axios 请求回调使用普通function写法，这种写法的this不会指向当前的类实例，就算解决了content的变量声明问题，后续调用this.openModalDialog时也会因为this指向错乱，引发this.openModalDialog is not a function类的报错。

修正后的参考实现 #

// 1. 提前在类作用域内定义需要传给弹窗的content，以Angular模板引用为例
@ViewChild('appModal') content: TemplateRef<any>;

openModalDialog(content) {
  this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
    this.closeResult = `Closed with: ${result}`;
  })
}

navigateToApp = () => {
  // 2. 把普通function回调改成箭头函数，保证this指向当前类实例
  axios.get('*************').then((res) => {
    if (res.data.message === "Not Found") {
      console.log("this condition....")
    } else {
      // 3. 传入已经定义好的类成员content，编译器可以正常识别变量来源
      this.openModalDialog(this.content)  
    }
  });
}

补充注意点 #

• 如果需要传递的弹窗内容是接口返回后动态生成的，需要在调用弹窗方法前，先把动态生成的内容赋值给一个提前声明的变量，不能直接使用未声明的content作为入参。
• 如果content是外部导入的弹窗组件类，需要保证导入语句已经生效，组件类已经在当前文件的作用域内可被识别，再作为入参传递。

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