Получить свойство родителя от дочернего компонента в угловой форме - PullRequest
Новая
       15

Получить свойство родителя от дочернего компонента в угловой форме

0 голосов
/ 18 мая 2018

Я использую Angular 6 с реактивными формами, мне нужно переключить форму между редактируемым и настраиваемым представлением «только для чтения».В проекте есть несколько пользовательских компонентов ввода, поэтому кажется, что самый простой способ - использовать привязку [readOnly] к элементу custom-form .Вопрос:

Как я могу получить значение readOnly родительского элемента внутри пользовательского ввода компонента без прямой привязки к каждому из них?

Например:

Шаблон с формой 

<custom-form formGroup="formGroup" [readOnly]="!(canEdit$ | async)">
  <custom-input formControlName="field1"></custom-input>
  <custom-input formControlName="field2"></custom-input>
  <custom-select formControlName="field3"></custom-select>
  ...
</custom-form>

Пользовательский шаблон ввода 

// Show input if form readOnly is false
<input *ngIf="!formIsReadOnly"...>

// Show some other representation if not
<span *ngIf="formIsReadOnly">...</span>

1 Ответ

0 голосов
/ 18 мая 2018

Если вы не хотите добавлять входной параметр readonly в свои пользовательские элементы управления, тогда вам потребуется служба или непрозрачный токен, который каждый из элементов управления получает из своего конструктора, чтобы определить, будет ли элемент управления доступен только для чтения или нет..

Для непрозрачного токена вам нужно будет указать логическое значение в корне приложения, а затем в любое время, когда вы захотите его изменить, вы должны будете повторно предоставить.

Сервис ( Demo )

Если вы хотите иметь возможность выключать значение readonly при выключении, вам необходимо использовать службу.

readonly.service.ts 
@Injectable()
export class ReadonlyService {
  public readonly = false;
}
readonly.component.ts
@Component({
  selector: 'app-readonly',
  templateUrl: './readonly.component.html',
  providers: [ReadonlyService],
})
export class ReadonlyComponent implements OnInit {

  constructor(public readonlyService: ReadonlyService) { }

  ngOnInit() {
    this.readonlyService.readonly = true;
  }
}
customInput.component.ts 
@Input() public value: any;
constructor(public readonlyService: ReadonlyService) { }
customInput.component.html 
<ng-container *ngIf="!readonlyService.readonly; else readonlyView">
  <input placeholder="Enter a value" [(ngModel)]="value">
</ng-container>

<ng-template #readonlyView>
  Your readonly value is: {{value}}
</ng-template>
...