Question

我使用带有反应形式的Angular 6，我需要在可编辑和自定义之间切换表单＆＃39; readonly＆＃39;视图。项目中有多个自定义输入组件，因此最简单的方法是在 custom-form 元素上使用 [readOnly] 绑定。问题是：

如何在自定义输入组件中获取父 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>

Answer 1

如果您不想在自定义控件中添加DROP PROCEDURE IF EXISTS dowhile; CREATE PROCEDURE dowhile() BEGIN SELECT @domain_arr := CONCAT(GROUP_CONCAT(domain SEPARATOR ','),',') AS domain_arr FROM ( SELECT t1.domain FROM user_domain t1 WHERE 1 GROUP BY t1.domain ) AS tt; DROP table IF EXISTS temp_table; create temporary table temp_table ( domain VARCHAR(100) not NULL ); SET @domain_arr_table= @domain_arr; WHILE LOCATE(',', @domain_arr_table) > 0 DO SET @domain = SUBSTRING(@domain_arr_table,1,LOCATE(',',@domain_arr_table) - 1); SET @domain_arr_table= SUBSTRING(@domain_arr_table, LOCATE(',',@domain_arr_table) + 1); SET @s= CONCAT('ALTER TABLE temp_table ADD COLUMN ',@domain,' TINYINT DEFAULT 0'); PREPARE stmt3 FROM @s; EXECUTE stmt3; END WHILE; WHILE LOCATE(',', @domain_arr) > 0 DO SET @domain = SUBSTRING(@domain_arr,1,LOCATE(',',@domain_arr) - 1); SET @domain_arr= SUBSTRING(@domain_arr, LOCATE(',',@domain_arr) + 1); SELECT @user_count := COUNT(*) FROM user_domain WHERE domain=@domain; INSERT INTO temp_table (domain) VALUES (@domain); SELECT @domains_should_be_1 := CONCAT(GROUP_CONCAT(domain SEPARATOR ','),',') FROM (SELECT domain FROM user_domain WHERE user_id IN (SELECT user_id FROM user_domain WHERE domain=@domain) GROUP BY domain HAVING COUNT(*) < @user_count) AS tt2; WHILE LOCATE(',', @domains_should_be_1) > 0 DO SET @domain_sb_1 = SUBSTRING(@domains_should_be_1,1,LOCATE(',',@domains_should_be_1) - 1); SET @domains_should_be_1= SUBSTRING(@domains_should_be_1, LOCATE(',',@domains_should_be_1) + 1); SET @s= CONCAT("UPDATE temp_table SET ",@domain_sb_1,"='1' WHERE domain='",@domain,"'"); SELECT @s; PREPARE stmt3 FROM @s; EXECUTE stmt3; END WHILE; END WHILE; END; call dowhile(); SELECT * FROM temp_table;输入参数，则需要一个服务或一个不透明的标记，每个控件都从其构造函数中获取，以确定控件是否只读或不。

对于不透明的令牌，您需要在应用程序的根目录提供一个布尔值，然后在您想要更改它时，您必须重新提供它。

服务（Demo）

如果您希望能够在关闭状态下切换只读值，则需要使用服务。

readonly.service.ts

readonly

readonly.component.ts

@Injectable()
export class ReadonlyService {
  public readonly = false;
}

customInput.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.html

@Input() public value: any;
constructor(public readonlyService: ReadonlyService) { }

以角度形式从子组件获取父级属性

1 个答案:

服务（Demo）