Question

我有4个项目：

视图容器，编辑容器，视图编辑组件，文本字段输入组件。

查看容器：

<app-view-edit
    viewMode="true">
</app-view-edit>

编辑容器：

<app-view-edit
    viewMode="false">
</app-view-edit>

视图编辑组件使用输入变量

@Input() public viewMode: boolean

并将其传递到视图编辑组件内部的文本字段输入组件

<text-field
   label="xxxx"
   name="xxxx"
   placeholder=""
   [readonly]="viewMode"
   [(ngModel)]="xxx.xxx">
</text-field>

文本字段组件的设置如下：

text-field.html：

<div>
    <label *ngIf="label" [attr.for]="identifier">{{label}}</label>
    <input   
        type="text"
        [readonly]="readonly"
        [placeholder]="placeholder"
        [(ngModel)]="value"
        [ngClass]="{invalid: (invalid | async )}"
        class="form-control"     
        [id]="identifier"
    />
    <app-validation-messages  
        *ngIf="invalid | async"
        [messages]="failures | async">
    </app-validation-messages>
</div>

text-field.ts：

import { Component, Optional, Inject, Input, ViewChild, OnInit } from '@angular/core';
import { NgModel, NG_VALUE_ACCESSOR, NG_VALIDATORS, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { ElementBase } from '../form-base';

@Component({
    selector: 'text-field',
    templateUrl: './text-field.component.html',
    styleUrls: ['./text-field.component.css'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: TextFieldComponent,
        multi: true,
    }]
})
export class TextFieldComponent extends ElementBase<string> {
    @Input() public label: string;
    @Input() public placeholder: string;
    @Input() public readonly: boolean;

    @ViewChild(NgModel) model: NgModel;

    public identifier = `text-field-${identifier++}`;

    constructor(
        @Optional() @Inject(NG_VALIDATORS) validators: Array<any>,
        @Optional() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<any>,
     ){
        super(validators, asyncValidators);
    }
    getValue(bool: boolean) {
        return false;
    }
}

let identifier = 0;

问题是，当输入字段使用上面的代码加载时，所有输入都具有readonly属性，无论我是否将viewMode设置为false（如在编辑容器中显示的那样）。我检查了许多控制台日志和函数，以确定是否将该值传递为false。

如果我转text-field.ts行

[readonly]="readonly"

到

[attr.readonly]="readonly"

我在dom中看到<... readonly =“ false”>。

所以我知道这些值在传递时是正确的。

如果我将文本文件组件上的readonly属性硬编码为布尔值，则该字段将呈现我期望的样子。

为什么通过将布尔值通过输入变量传递到文本输入中而看到不同的行为？

角度5，父输入变量未按预期与子组件交互

0 个答案: