Заворачивание компонентов в угловые - PullRequest
Новая
       14

Заворачивание компонентов в угловые

0 голосов
/ 20 марта 2019

Мне нужно самостоятельно обернуть компонент с ползунком, я написал:

mytoggle.component.ts 

import { Component, OnInit, Input, forwardRef, ViewChild, ElementRef } from '@angular/core';
import {MatSlideToggle, MatSlideToggleChange} from '@angular/material/slide-toggle';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'ng7-common-ng7-slide',
  templateUrl: 'ng7-slide.component.html',
  styles: [],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => Ng7SlideComponent),
      multi: true
    }
  ]
})
export class Ng7SlideComponent extends MatSlideToggle {

}

И mytoggle.component.html : 

<mat-slide-toggle
    [checked]="checked"
    [disabled]="disabled">
    {{label}}
</mat-slide-toggle>

и в моем приложении я использую так:

app.component.html 

<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit(formGroup.value)" ngNativeValidate>


  <!-- THIS WORKS <mat-slide-toggle formControlName="slideToggle">Enable Wifi</mat-slide-toggle> -->
  <ng7-common-ng7-slide formControlName="slideToggle" label="test me!">
</ng7-common-ng7-slide>

  <button mat-rasied-button type="submit">Save Settings</button>
</form>

app.component.ts 

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';

@Component({
  selector: 'home-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  formGroup: FormGroup;

  constructor(formBuilder: FormBuilder) {
    this.formGroup = formBuilder.group({
      slideToggle: false
    });
  }

  onFormSubmit(formValue: any) {
    alert(JSON.stringify(formValue, null, 2));
  }

}

Таким образом, formValue в методе onFormSubmit всегда предупреждает «slideToggle»: false независимо от того, проверена она или нет, когда яиспользуйте mat-slide-toggle, чтобы он предупреждал об истинном или ложном соответствии с состоянием переключения правильно.

Есть ли что-нибудь еще, чтобы сделать?Мне просто нужно расширить компонент и все события.

1 Ответ

0 голосов
/ 22 марта 2019

После некоторых исследований я получил кое-что, что хорошо работает ..

Я импортировал абстрактный класс, который реализует базовые методы-значения:

https://stackoverflow.com/a/45480791/2161180

import { ControlValueAccessor } from '@angular/forms';

export abstract class AbstractValueAccessor implements ControlValueAccessor {
    innerValue: any = '';
    get value(): any { return this.innerValue; }
    set value(v: any) {
      if (v !== this.innerValue) {
        this.innerValue = v;
        this.onChange(v);
      }
    }

    writeValue(value: any) {
      this.innerValue = value;
      this.onChange(value);
    }

    onChange = (_) => {};
    onTouched = () => {};
    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

Затем я создал свой компонент, расширяя его: 

import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Component, Input, forwardRef } from '@angular/core';
import { AbstractValueAccessor } from '../abstract.component';

    @Component({
      selector: 'my-switch',
      templateUrl: './my-switch.component.html',
      styleUrls: ['./my-switch.component.css'],
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          multi: true,
          useExisting: forwardRef(() => MySwitchComponent)
        }
      ]
    })
    export class MySwitchComponent extends AbstractValueAccessor {

      @Input() label: string;
      @Input() checked: boolean;
      @Input() disabled: boolean;

    }

HTML: 

<mat-slide-toggle
    [(ngModel)]="value"
    [checked]="checked"
    [disabled]="disabled">
  {{label}}
</mat-slide-toggle>

Модуль: 

import { FormsModule } from '@angular/forms';
import { MatSlideToggleModule } from '@angular/material';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MySwitchComponent } from './my-switch.component';

@NgModule({
  declarations: [MySwitchComponent],
  imports: [
    CommonModule,
    MatSlideToggleModule,
    FormsModule
  ],
  exports: [
    MySwitchComponent
  ]
})
export class MySwitchModule { }

И использовать его: 

<form [formGroup]="fb">
  <my-switch formControlName="inputSwitch" label="Toggle-me!"></my-switch> 
  <strong> Value: </strong> {{inputSwitch}}
</form>

или 

<my-switch [(ngModel)]="inputSwitchNgModel" label="Toggle-me!"></my-switch>
<strong> Value: </strong> {{inputSwitchNgModel}}
...