Question

我正在尝试创建一个角度为7/8的自定义组件注释，但是每次执行“ ng serve”并打开应用程序时，我都会在chrome dev控制台中收到以下错误：声明的意外值“ xxx”模块“ AppModule”。请添加@ Pipe / @ Directive / @ Component批注。

这些是我要重现此问题的步骤：

我创建了一个包含批注实现的文件：

export const defaultComponentProps = {
  selector: undefined,
  inputs: undefined,
  outputs: undefined,
  host: undefined,
  exportAs: undefined,
  moduleId: undefined,
  providers: undefined,
  viewProviders: undefined,
  changeDetection: ChangeDetectionStrategy.Default,
  queries: undefined,
  templateUrl: undefined,
  template: undefined,
  styleUrls: undefined,
  styles: undefined,
  animations: undefined,
  encapsulation: undefined,
  interpolation: undefined,
  entryComponents: undefined
};

export function MyCustomComponent(_props) {
  _props = Object.assign({}, defaultComponentProps, _props);

  return function (cls) {
    const annotations = Reflect.getMetadata('annotations', cls) || [];
    annotations.push(new Component(_props));
    Reflect.defineMetadata('annotations', annotations, cls);
    return cls;
  };
}

然后我使用以下新注释创建了一个新组件：

@MyCustomComponent({
  template: `
    Hello world
  `,
  context: {
    title: 'Angular2 Example',
    content_1: 'content 1',
    content_2: 'content 2'
  },
  selector: 'itr-test-annotation',
})
export class TestAnnotationComponent {

  constructor() {
  }
}

我在AppModule中定义了新组件

@NgModule({
  declarations: [
    AppComponent,
    TestAnnotationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

在AppModule中，当我在声明数组中包含新组件时，出现错误：模块'AppModule'声明了意外的值'TestAnnotationComponent'。请添加@ Pipe / @ Directive / @ Component批注。

我期望的是我的自定义组件已被渲染为普通组件，但是运行时错误却没有给我可能性。似乎当执行角度执行this.isDirective(declaredType)时，结果始终为false，因为注释数组始终为空，而我也不明白为什么为空。我缺少什么了？

如何以角度创建自定义组件注释以避免错误，请添加@ Pipe / @ Directive / @ Component注释

0 个答案: