我有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>

文本字段组件设置如下:

文本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>

文本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属性硬编码为boolean,则该字段呈现我的期望 .

为什么我通过输入变量将布尔值传递给文本字段输入来看到不同的行为?