1 : html中自定義控件progressBar ，雙向綁定變量。並且使用class中的變量_progressBarWidth
<ng-template #audioBar>//自定義控件
<div #progressBarContainer class="plcm-field-row flex-container-row-left plcm-progress-bar-container">
<span #progressBar class="plcm-audio-progress-bar" [style.width.%]="_progressBarWidth"></span>
</div>
</ng-template>
notes: class使用html的東東，比如 ng-template，需要用ViewChild加載.
html使用class中的變量，則可以直接使用
2 //html中的東西，必須在class中加載一下，class才能用
export class AudioPage implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('audioBar') audioBar: TemplateRef<any>;
ngOnit() {
this._progressBarWidth =50;
}
}
3 //inputFormItem is all controller
inputFormItem: PFormItem[];
let inputFormItem = [
//PFormConfigItem is each controller.
new PFormConfigItem({
label: 'name',
key: 'audio.in' + i.toString() + '.name',
fieldType: PFormFieldType.DISPLAY
}),
//pform load define controller
new PFormItem({
template: this.audioBar,
})
......
]
4 //p-form is page or subform: include control and button ,header etc
<p-form [subHeader]="i"
[topBorder]="false"
[items]="inputFormItem"
[saveButton]="false">
</p-form>
other： windows:修改界面控件屬性，vc通過控件屬性面板adjust len，width，height etc。 或者通過 msdn找 api。
angularjs：html控件,css 調節控件屬性;第三方lib primeng，eg：p-calendar;
查看第三方控件的css
ui\web.angular2\node_modules\primeng\resources\components\calendar\calendar.css
ts 是page 的class，html是網頁。
mainactively.java是andriod 的前端，DBhelper.class 是後端。
mainactively.java call DBhelper.java 處理db。兩個class在一個package，組合使用。