ng-content not working angular2

时间:2016-05-10 13:35:51

标签: angular

在使用ng-content将角度2升级到beta 0.17后,我遇到了问题。 我有来自父级的绑定ngModel的自定义组件(如本文所述 article plunkr

但是在将角度升级到0.17 ng之后,内容无法呈现任何内容。仅在从组件选择器中删除ngModel后才有效。我怎么解决它?谢谢你的帮助。因为我真的不知道该怎么做..

有自定义组件调用

 <my_select   [id]="'prefix'"
              [(ngModel)]="formModel.prefix"
           [formName]="'detailsForm'">
              <option value="Mr.">Mr.</option>
              <option value="Mrs.">Mrs.</option>
              <option value="Ms.">Ms.</option>
              <option value="Miss">Miss</option>
            </my_select>

有这个自定义组件

    import {Component, Input, Output, EventEmitter, forwardRef, Provider, OnInit} from 'angular2/core';
// import {
//   NG_VALUE_ACCESSOR,
//   ControlValueAccessor
// } from 'angular2/src/common/forms/directives/control_value_accessor';
import {ControlValueAccessor, NG_VALUE_ACCESSOR } from 'angular2/common';
/* ------- !Angular 2 native components  ---------*/




import {LocalStorageService} from '../../../shared/local_storage.service';
/* ------- !Services  ---------*/

import {Config} from '../../../config/config';
/* ------- !Config  ---------*/

const MODULE_PATH:string = `${Config.getProdFolderName()}/application/controls/select`;

let nextUniqueId = 0;

const INPUT_CONTROL_VALUE_ACCESSOR = new Provider(
  NG_VALUE_ACCESSOR, {
    useExisting: forwardRef(() => SelectComponent),
    multi: true
  });

@Component({
  selector: 'my_select',
  templateUrl: `${MODULE_PATH}/select.component.html`,
  styleUrls: [`${MODULE_PATH}/select.component.css`],
  providers: [INPUT_CONTROL_VALUE_ACCESSOR]
})

export class SelectComponent implements ControlValueAccessor, OnInit {

  private _focused:boolean = false;
  private _value:any = '';
  public activatedInputs;
  public key;

  @Input() required:boolean = false;
  @Input() label:string;
  @Input() tabindex:number;
  @Input() id:string = `cgm_select_${nextUniqueId++}`;
  @Input() disabled:boolean = false;
  @Input() customClass = {label: 'col-md-3', input: 'col-md-9 p-l-none'};
  @Input() formName:string = 'defaultFrom';
  @Input() options:any[] = [];

  get value():any {
    return this._value;
  };

  @Input() set value(v:any) {
    if (v !== this._value) {
      this._value = v;
      this._onChangeCallback(v);
    }
  }

  constructor(private _localStorageSrvc:LocalStorageService) {
  }

  ngOnInit() {
    this.key = this.formName + '_'+ this.id;
    this.activatedInputs = this._localStorageSrvc.getByKey('tabNav') || {};
  }

  onLeftBorderClick() {
    if (!this.required) {
      this.activatedInputs = this._localStorageSrvc.getByKey('tabNav') || {};
      this.activatedInputs[this.key] = !this.activatedInputs[this.key];
      this._localStorageSrvc.save('tabNav', this.activatedInputs);
    }
  }

  /**
   *  Code below is for custom input two way data binging via ControlValueAccessor.
   *  More examples and details you can find on https://github.com/angular/material2
   */

  /** Callback registered via registerOnTouched (ControlValueAccessor) */
  private _onTouchedCallback:() => void = () => {
  };

  /** Callback registered via registerOnChange (ControlValueAccessor) */
  private _onChangeCallback:(_:any) => void = (v) => {
  };

  /** @internal */
  onFocus() {
    this._focused = true;
  }

  /** @internal */
  onBlur() {
    this._focused = false;
    this._onTouchedCallback();
  }

  /** @internal */
  onChange(ev:Event) {
    this.value = (<HTMLInputElement>ev.target).value;
    this._onTouchedCallback();
  }

  /** Implemented as part of ControlValueAccessor. */
  writeValue(value:any) {
    this._value = value;
  }

  /** Implemented as part of ControlValueAccessor. */
  registerOnChange(fn:any) {
    this._onChangeCallback = fn;
  }

  /** Implemented as part of ControlValueAccessor. */
  registerOnTouched(fn:any) {
    this._onTouchedCallback = fn;
  }
}

有模板

    <div class="form-group">
  <label class="control-label {{customClass.label}}"
         [attr.for]="id">{{label}}</label>
  <div class="{{customClass.input}}">
    <div class="input-group"
         [ngClass]="{'activated': activatedInputs[key], 'error': !input.valid && required, 'success': input.valid && required}">
      <div class="input-group-addon left-border" (click)="onLeftBorderClick(input)"></div>
      <select #input="ngForm"
              class="form-control"
              (change)="onChange($event)"
              [(ngModel)]="value"
              [tabindex]="required || activatedInputs[key] ? tabindex : -1"
              [required]="required"
              [disabled]="disabled">
        <option *ngFor="let option of options" value="{{option.value}}">{{option.name}}</option>
        <ng-content></ng-content>
      </select>

    </div>
  </div>
</div>

0 个答案:

没有答案