[TOC]
## Forgetting Parentheses on a Decorator
在装饰器上忘记括号
装饰器`()`在注释后应该有括号。一些例子包括:`@Injectable()`,`@Optional()`,`@Input()`,等。
~~~
@Directive({
selector:
selector: 'my-dir'
})
})
class MyDirective {
// Wrong, should be @Optional()
// @Optional does nothing here, so MyDirective will error if parent is undefined
constructor( @Optional parent: ParentComponent) { }
}
}
~~~
## Cannot Resolve all Parameters
无法解析所有参数
~~~
Cannot resolve all parameters for 'YourClass'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'YourClass' is decorated with Injectable.
~~~
此异常意味着Angular对`YourClass`构造函数的一个或多个参数感到困惑。为了进行[依赖注入,](https://angular.io/docs/ts/latest/guide/dependency-injection.html)Angular需要知道要注入的参数的类型。您可以通过指定参数的类来让Angular知道这一点。确保:
* 您正在导入参数的类。
* 您已正确注释参数或指定其类型。
~~~
import { MyService } from 'my-service'; // Don't forget to import me!
@Component({
template:
template: `Hello World`
})
})
export class MyClass {
// service is of type MyService
constructor(service: MyService) {
}
}
}
}
~~~
有时,代码中的循环引用可能会导致此错误。循环引用意味着两个对象相互依赖,因此无法在彼此之前声明它们。为了解决这个问题,我们可以使用[`forwardRef`](https://angular.io/docs/ts/latest/api/core/index/forwardRef-function.html)Angular内置的函数。
~~~
import { forwardRef } from '@angular/core';
@Component({
selector:
selector: 'my-button',
template:
template: `<div>
<icon></icon>
<input type="button" />
</div>`,
directives: [forwardRef(
directives: [forwardRef(() => MyIcon)] // MyIcon has not been defined yet
}) // forwardRef resolves as MyIcon when MyIcon is needed
class MyButton {
constructor() { }
}
}
@Directive({
selector:
selector: 'icon'
})
})
class MyIcon {
constructor(containerButton: MyButton) { } // MyButton has been defined
}
~~~
## No provider for ParamType
没有ParamType的提供者
~~~
No provider for ParamType! (MyClass -> ParamType)
~~~
这意味着Angular知道它应该注入的参数类型,但它不知道如何注入它。
如果参数是服务,请确保已将指定的类添加到应用程序可用的提供程序列表中:
~~~
import { MyService } from 'my-service';
@Component({
templateUrl:
templateUrl: 'app/app.html',
providers: [MyService]
providers: [MyService] // Don't forget me!
})
})
class MyApp { }
~~~
如果参数是另一个组件或指令(例如,父组件),将其添加到提供程序列表将使错误消失,但这将与上面[的提供程序](https://ionicframework.com/docs/faq/build#multiple_instances)的[多个实例](https://ionicframework.com/docs/faq/build#multiple_instances)具有相同的效果。您将创建组件类的新实例,并且不会获得对所需组件实例的引用。相反,请确保您希望注入的指令或组件可供组件使用(例如,如果您希望它是父组件,则它实际上是父组件)。通过一个例子,这可能是最容易理解的:
~~~
@Component({
selector:
selector: 'my-comp',
template:
template: '<p my-dir></p>',
directives: [forwardRef(
directives: [forwardRef(() => MyDir)]
})
})
class MyComp {
constructor() {
this.name = 'My Component';
}
}
}
}
@Directive({
selector:
selector: '[my-dir]'
})
})
class MyDir {
constructor(c: MyComp) { // <-- This is the line of interest
// Errors when directive is on regular div because there is no MyComp in the
// component tree so there is no MyComp to inject
console.log('Host component\'s name: ' + c.name);
}
}
}
}
@Component({
template:
template: "<my-comp></my-comp>" + // No error in MyDir constructor, MyComp is parent of MyDir
"<my-comp my-dir></my-comp>" + // No error in MyDir constructor, MyComp is host of MyDir
"<div my-dir></div>", // Errors in MyDir constructor
directives: [MyComp, MyDir]
})
directives: [MyComp, MyDir]
})
class MyApp { }
~~~
这是一个说明可用喷射器的图表:
~~~
+-------+
| App |
+---+---+
|
+-------------+------------+
| |
+------+------+ +--------+--------+
| Div (MyDir) | | MyComp (MyDir) | <- MyComp can be injected
+-------------+ +--------+--------+
^ |
No MyComp to inject +------+------+
| P (MyDir) | <- MyComp can be injected from parent
+-------------+
| App |
+---+---+
|
+-------------+------------+
| |
+------+------+ +--------+--------+
| Div (MyDir) | | MyComp (MyDir) | <- MyComp can be injected
+-------------+ +--------+--------+
^ |
No MyComp to inject +------+------+
| P (MyDir) | <- MyComp can be injected from parent
+-------------+
~~~
要扩展前面的示例,`@Optional`如果您不总是期望组件/指令引用,则可以使用Angular注释:
~~~
@Directive({
selector:
selector: '[my-dir]'
})
})
class MyDir {
constructor(@Optional() c: MyComp) {
// No longer errors if c is undefined
if (c) {
console.log(`Host component's name: ${c.name}`);
}
}
}
}
}
}
~~~
## Can't bind to 'propertyName' since it isn't a known property
无法绑定到'propertyName',因为它不是已知属性
~~~
Can't bind to 'propertyName' since it isn't a known property of the 'elementName' element and there are no matching directives with a corresponding property
~~~
当您尝试在没有该属性的元素上绑定属性时会发生这种情况。如果元素是一个组件或者有一个或多个指令,则组件和指令都不具有该属性。
<!-- div没有'foo'属性 -->
<div [foo]="bar"></div>
~~~
## No provider for ControlContainer
没有ControlContainer的提供者
~~~
No provider for ControlContainer! (NgControlName -> ControlContainer)
~~~
此错误是上述错误的更具体版本`No provider`。当您使用NgControlName之类的表单控件而未指定父[NgForm](https://angular.io/docs/ts/latest/api/forms/index/NgForm-directive.html)或NgFormModel时,会发生这种情况。在大多数情况下,可以通过确保表单控件位于实际表单元素中来解决此问题。NgForm`form`用作选择器,因此这将实例化一个新的NgForm:
~~~
@Component({
template:
template:
'<form>' +
'<input ngControl="login">' +
'</form>'
})
~~~
## No Component Factory Found
找不到组件工厂
~~~
No component factory found for <component name>
~~~
当您尝试使用尚未导入并添加到ngModule的组件,提供程序管道或指令时,会发生此错误。每当你添加新的组件,供应商,管或指令您的应用程序,你必须将它添加到`ngModule`了在`src/app/app.module.ts`对角文件,以便能够使用它。要修复此错误,您可以将有问题的组件,提供者,管道或指令导入app.module文件,然后如果它是提供者,则将其添加到`providers`数组中,对于组件,管道或指令,将其添加到声明数组和`entryComponents`阵列。
- 入门
- 介绍
- 什么是Ionic Framework?
- 核心概念
- 浏览器支持
- 版本
- 支持
- 安装
- CLI安装
- 程序包和CDN
- 环境设置
- iOS安装
- Android安装
- 建造项目
- 开始
- 创建
- 项目迁移
- 跨平台
- 运行概述
- 在iOS上运行
- 在Android上运行
- 测试
- 做出贡献的
- web视图
- ionic存储
- 布局
- 结构体
- 响应式网格
- CSS实用工具
- 主题化
- 基本
- 平台样式
- CSS变量
- 高级
- 导航
- Angular
- 编译和发布
- 渐进式Web应用程序
- iOS App Store
- Android Play商店
- PC桌面应用程序
- 常问问题
- 名词解释
- 构建错误 Build Errors
- 运行时错误 Runtime Errors
- 本机错误 Native Errors
- 开发人员提示 Developer Tips
- 更多资源
- 书籍
- 课程
- 实战项目
- 帖子
- 工具
- 视频
- UI组件
- 弹出式菜单 ion-action-sheet
- 弹出菜单控制器 ion-action-sheet-controller
- 弹出式菜单 ion-action-sheet
- 弹出警告 ion-alert
- 弹出警告控制器 ion-alert-controller
- 命令行 CLI
- 原生API
