有条件地应用角度指令

时间:2018-08-07 20:25:37

标签: angular6 angular2-directives

我有一个应用于要素的AutoFocus角度指令。

以我的一种形式:

在添加模式下,“项目ID”字段应具有焦点

在编辑模式下,由于“项目ID”被禁用,因此“名称”应具有焦点。

我只能通过输入属性来执行此操作。还有另一种方法可以使我不必使用public static void main(String[] args) throws MalformedURLException { final URL testURL = new URL("https://stackoverflow.com/questions/1494337/can-html-style-links-be-added-to-swt-styledtext"); Display display = new Display(); Shell shell = new Shell(display); shell.setLayout(new GridLayout(1, true)); StyledText sTextWidget = new StyledText(shell, SWT.READ_ONLY); final String firstPart = "Some text before "; String msg = firstPart + testURL.toString() + " some text after"; sTextWidget.setText(msg); sTextWidget.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true)); StyleRange linkStyleRange = new StyleRange(firstPart.length(), testURL.toString().length(), null, null); linkStyleRange.underline = true; linkStyleRange.underlineStyle = SWT.UNDERLINE_LINK; linkStyleRange.data = testURL.toString(); sTextWidget.setStyleRange(linkStyleRange); shell.open(); while(!shell.isDisposed()) { display.readAndDispatch(); } }

指令:

isApplyAutoFocus

并使用

import { Directive, AfterViewInit, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appAutoFocus]'
})
export class AutoFocusDirective implements AfterViewInit {
  @Input() isApplyAutoFocus: boolean = true;

  constructor(private el: ElementRef) { }

  ngAfterViewInit() {
    if (this.isApplyAutoFocus)
      this.el.nativeElement.focus();
  }
}

更新1:

https://angular.io/guide/attribute-directives

通过查看上面使用的链接,输入的别名与指令选择器相同。

<div class="form-group form-row">
  <div class="col-lg-3 text-right"><label for="projectId" class="col-form-label">Project Id</label></div>
  <div class="col-lg-9"><input type="text" id="projectId" name="projectId" class="form-control" placeholder="Project Id" [disabled]="formMode === zFormMode.Edit" appAutoFocus [isApplyAutoFocus]="formMode === zFormMode.Add"></div>
</div>

<div class="form-group form-row">
  <div class="col-lg-3 text-right"><label for="name" class="col-form-label">Name</label></div>
  <div class="col-lg-9"><input type="text" id="name" name="name" class="form-control" placeholder="Name"  appAutoFocus [isApplyAutoFocus]="formMode === zFormMode.Edit"></div>
</div>

然后在上述情况下使用

@Input('appAutoFocus') isApplyAutoFocus: boolean = true;

以及另一种形式

<div class="form-group form-row">
  <div class="col-lg-3 text-right"><label for="projectId" class="col-form-label">Project Id</label></div>
  <div class="col-lg-9"><input type="text" id="projectId" name="projectId" class="form-control" placeholder="Project Id" [disabled]="formMode === zFormMode.Edit" [appAutoFocus]="formMode === zFormMode.Add"></div>
</div>

<div class="form-group form-row">
  <div class="col-lg-3 text-right"><label for="name" class="col-form-label">Name</label></div>
  <div class="col-lg-9"><input type="text" id="name" name="name" class="form-control" placeholder="Name"  [appAutoFocus]="formMode === zFormMode.Edit"></div>
</div>

0 个答案:

没有答案