Question

所以我有一个简单的组件：

galery.comonent.ts

import {Component, Input} from '@angular/core';


@Component({
  selector: 'galery-component',
  templateUrl: 'galery.component.html',
  styleUrls: ['galery.component.css']
})
export class GaleryComponent {
  @Input() userPosts;
}

在其中包含自定义标记的html文件。此标记是我模块中另一个组件的选择器。

galery.comonent.html

 <div class="container">
        <post-details class="post-container" *ngFor="let post of userPosts" [singlePost] = "post">
        </post-details>
    </div>

当我尝试运行我的测试用例时，启动时出现此错误

如果＆＃39;发布详细信息＆＃39;是一个Angular组件，它有＆quot; singlePost＆＃39;输入，然后验证它是否是该模块的一部分。

如果＆＃39;发布详细信息＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了＆＃39; @ NgModule.schemas＆＃39;这个组件   压制此消息。

这是一个测试代码：

test.spec.ts

describe('BannerComponent (inline template)', () => {

  let comp:    GaleryComponent;
  let fixture: ComponentFixture<GaleryComponent>;
  let de:      DebugElement;
  let el:      HTMLElement;


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ GaleryComponent ],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(GaleryComponent); // here test fails

    comp = fixture.componentInstance;
    de = fixture.debugElement.query(By.css('post-details'));
    el = de.nativeElement;
  });

我已将CUSTOM_ELEMENTS_SCHEMA添加到我的模块中但没有任何效果。这是app.module.ts

app.module.ts

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {AppComponent} from './app.component';
import {GaleryComponent} from './Components/galeryComponent/galery.component';
import {PostDetailsComponent} from './Components/postDetailsComponent/post-details-component.component';

@NgModule({
  declarations: [
    AppComponent,
    GaleryComponent,
    PostDetailsComponent
  ],
  exports: [GaleryComponent],
  imports: [
    CommonModule,
    NgbModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

export class AppModule {
}

也许有人知道发生了什么？我已经阅读了类似问题的一些答案，但它们并没有太大帮助。

Answer 1

我怀疑你在错误的地方定义了架构

尝试

TestBed.configureTestingModule({
  declarations: [GaleryComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // will work if selector has '-' in its name
})

或

TestBed.configureTestingModule({
  declarations: [GaleryComponent],
  schemas: [NO_ERRORS_SCHEMA]
})

另见

Essential Angular: Testing

Answer 2

我认为问题出在属性绑定[singlePost]上，它试图在@Input中找到它。

确保您的属性绑定正确。

测试运行时Angular 2模板解析错误

2 个答案: