我正在尝试mat-menu在应用程序的工具栏中为我编写一个测试。当我调用button.click()测试时，Cannot read property 'templateRef' of undefined控制台中出现错误。
在浏览器中可以找到所有作品，我相信这与我运行测试的方式有关吗？
app.component.spec.ts
import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';
import { AppRoutes } from './app.routes';
import {
MatToolbarModule,
MatIconModule,
MatMenuModule,
MatButtonModule
} from '@angular/material';
import { HomeComponent } from './home/home.component';
import { UserService } from './user/user.service';
class MockUserService {
signIn() {}
}
describe('AppComponent', () => {
let app: AppComponent;
let fixture: ComponentFixture<AppComponent>;
beforeEach(async(() => { …我目前在使用带有承诺的茉莉花测试时遇到问题。
错误是“未处理的承诺拒绝：”这意味着我的承诺没有正确处理catch()，then()我想。
这是我的测试：
it('tests the openRepo function with changed and invalid path', (done) => {
const OldPath = '/old';
const NewPath = '/invalid';
const ProjectModalBoolean = true;
component.path = OldPath;
component.openFolder = NewPath;
component.projectModalLoading = ProjectModalBoolean;
component.openRepo().then(() => {
expect(component.openFolder).toBe('');
expect(component.projectModalLoading).toBeFalsy();
done();
});
});
在函数中openRepo我有以下代码：
return this.gitService.setPath(this.openFolder)
.then((data) => {
this.projectModalLoading = false;
this.projectModalVisible = false;
this.openFolder = '';
this.toastr.info(data.message, data.title);
})
.catch((data) => {
this.projectModalLoading = false;
this.openFolder = '';
this.toastr.error(data.message, data.title);
}); …我正在尝试做的事情：
Plnkr -> http://plnkr.co/edit/Do4qYfDLtarRQQEBphW3?p=preview
在查看 angular.io 文档时，我发现“Injector”可用于获取构造函数中的父组件
constructor(private el: ElementRef, private hostComponent:Injector){
el.nativeElement.draggable = 'true';
}
在这样做时，我得到了 Injector Object。据我所知，我应该使用
this.hostComponent.get(INJECTORTOKEN)
我难以理解的问题是，Angular 中提供的示例假设您知道要在令牌中提供的 Component 类型。IE：
this.hostComponent.get(Image);
this.hostComponent.get(Box);
在 pnkr 示例中，我的模板中有两个组件
<div>
<h2>Hello {{name}}</h2>
<my-image></my-image> <!-- Uses the "My Directive" -->
<my-box></my-box> <!-- Uses the "My Directive" -->
</div>
我的问题是，在“mydirective.ts”中。当我不知道父组件是“my-image”还是“my-box”组件时，如何利用“injector.get()”。
在提供的示例中，指令被触发“ondrag()”。查看控制台，获取日志消息。
非常感谢任何帮助。
非常感谢你。
我正在向表单中动态添加行，并希望每个新行都具有唯一的ID号。
我有以下代码来添加新组件（代表新行），但是我发现它component.instance仅包含新创建的组件的“常规”属性，而不包含用修饰的属性@Input()。有没有办法动态写入/修改@Input()属性？当动态创建一个组件时，自然会假设必须有一种直接的方式以某种方式提供@Input（）值！
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(thisType);
const component = this.subEnrollForm.container.createComponent(componentFactory);
component.instance.rowData.push(newRow); //rowData is a property in the
dynamically-created component and
is decorated with @Input()
这是动态创建的组件：
export class SubEnrollFormRowComponent implements OnInit, DoCheck, OnChanges, AfterContentInit, AfterViewInit {
@Input() rowData;
objKeys: Array<any> = [];
subKeys: Array<any> = [];
我看到一个具有以下答案的旧帖子，但希望随后添加了新功能来解决此问题：
不能，Angular2绑定仅适用于静态添加到组件模板的组件和指令。
对于所有其他情况，请使用共享服务，如 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service中所述
您也可以使用
让componentRef = entryPoint.createComponent（componentFactory）; componentRef.instance.someProp ='someValue'; componentRef.instance.someObservableOrEventEmitter.subscribe（data => this.prop = data）;
后一种解决方案对我不起作用，也没有建议将组件转换为type <any>。我对上述services方法的解释是，我需要为孙子创建一个Observable，以监视祖父母何时尝试更新孙子的@Input（）属性，但是在我看来，这种方法对很多不必要的编码和开销来实现应该非常简单明了的东西（除非我缺少某些东西，这很有可能！）。如果有人可以通过相对简单的方法来初始化/动态修改以@Input装饰的孙子组件属性，请在此先感谢！