我正在尝试使用一个组件链接组件 routerLink = "selected"
const routes: Routes = [
{
path: '',
children: [
{
path: 'account',
component: AccountComponent,
children: [
{
path: 'selected',
component: SelectedComponent,
},
],
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class AccountSettingsRoutingModule { }
Run Code Online (Sandbox Code Playgroud)
这是AccountComponent
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Http, Response, Headers } from '@angular/http';
@Component({
selector: 'app-list-accounts',
templateUrl: './accounts-list.component.html', …Run Code Online (Sandbox Code Playgroud) 我有一个这样的组件
@Component({
selector: 'app-custom-form-control',
templateUrl: '<input>',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SelectComponent),
multi: true
}
]
})
export class CustomFormControlComponent implements ControlValueAccessor {...}
Run Code Online (Sandbox Code Playgroud)
如您所见,它是一个自定义表单控件。我在要测试的组件中使用它。
@Component({
selector: 'app-root',
templateUrl: '<div [formGroup]="form">
<app-custom-form-control formControlName="my_field"></app-custom-form-control>
</div>',
})
export class AppComponent implements OnInit, OnDestroy {...}
Run Code Online (Sandbox Code Playgroud)
那么我该如何模拟app-custom-form-control我的测试呢?
当前的实现需要一个真正的组件......
beforeEach(async(() => {
const testRouter = new RouterStub();
const testDataService = new DataServiceStub();
TestBed.configureTestingModule({
declarations: [
AppComponent,
CustomFormControlComponent // it is a real stuff
],
imports: [
ReactiveFormsModule
],
providers: [
{ …Run Code Online (Sandbox Code Playgroud) testing unit-testing custom-controls angular angular-reactive-forms
我在表格中上传了文件。我还需要创建发布请求以将此上传文件和其他一些表单字段作为后端。
下面是我的代码:
fileChange(event) {
const fileList: FileList = event.target.files;
if (fileList.length > 0) {
this.file = fileList[0];
this.form.get('file_upload').setValue(this.file);
}
}
onClick(){
const val = this.form.value;
const testData = {
'file_upload': this.file,
'id': val.id,
'name' : val.name,
'code': val.code,
};
this.http.post('https://url', testData,
.subscribe(
response => {
console.log(response);
});
}
Run Code Online (Sandbox Code Playgroud)
除上载文件外,每个字段值都将发送到后端。我是否将上传的文件以及表单字段发送到后端?让我知道是否需要其他信息。
当我在一个打开的选项卡中注销时,我想从所有打开的选项卡中自动注销。
我在登录时将jwt令牌设置为localStorage,并在注销时删除该令牌。
如何使用存储事件从所有打开的选项卡注销?
angular ×4
file-upload ×1
javascript ×1
logout ×1
router ×1
routerlink ×1
testing ×1
unit-testing ×1