在使用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>