AI写作智能体 自主规划任务,支持联网查询和网页读取,多模态高效创作各类分析报告、商业计划、营销方案、教学内容等。 广告
[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`阵列。