小编yer*_*yer的帖子

Angular 4:更改url,但不呈现组件

我正在尝试使用一个组件链接组件 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)

javascript router routerlink angular

9
推荐指数
1
解决办法
4799
查看次数

如何测试包含自定义表单控件的组件?

我有一个这样的组件

@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

6
推荐指数
1
解决办法
3448
查看次数

angular 4-如何在POST中发送文件到后端

我在表格中上传了文件。我还需要创建发布请求以将此上传文件和其他一些表单字段作为后端。

下面是我的代码:

      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)

除上载文件外,每个字段值都将发送到后端。我是否将上传的文件以及表单字段发送到后端?让我知道是否需要其他信息。

file-upload angular angular4-forms

4
推荐指数
1
解决办法
7022
查看次数

在一个打开的选项卡中注销后,角度4-注销将在所有选项卡中自动注销

当我在一个打开的选项卡中注销时,我想从所有打开的选项卡中自动注销。

我在登录时将jwt令牌设置为localStorage,并在注销时删除该令牌。

如何使用存储事件从所有打开的选项卡注销?

logout local-storage angular

3
推荐指数
1
解决办法
1630
查看次数