如何禁用 Angular 中不同組件的項目

Question

所以我有標簽組件，並在我的圖表詳細信息組件中導入了該組件。 在我的圖表詳細信息組件中，我有一個復選框，它將禁用位於圖表詳細信息頁面內的所有輸入框、下拉框、按鈕，但由於某種原因，當我單擊復選框時我的導入標簽組件沒有禁用。 任何有關如何解決此問題的建議或幫助，以便用戶在單擊復選框時無法添加或刪除標簽，我們將不勝感激。

圖表詳細信息組件。 HTML

//Check box to disable all the input, drop down, buttons
    <mat-checkbox *ngIf="chart && workspace" color="primary" [disabled]="this.workspace.type === WorkspaceType.user"
        [(ngModel)]="chart.isPublished" (ngModelChange)="publishChange($event)">Published</mat-checkbox>

//Example Button
   <button color="primary" mat-flat-button (click)="saveClick()" [disabled]="this.chart.isPublished">Save</button>

// Imported Tags Component
        <mc-tags [_normalTags]="chart.tags" [removable]="true" [selectable]="true"
        (added)="tagAdded($event)" (removed)="tagRemoved($event)" [disabled]="this.chart.isPublished" >
        </mc-tags>

我添加了 [disabled]="this.chart.isPublished" 但我收到一條錯誤消息“無法綁定到 'disabled'，因為它不是 'mc-tags' 的已知屬性。”。 我也嘗試過（禁用）但仍然無法正常工作，即使選中了復選框，用戶仍然可以添加或刪除標簽。

標簽 Component.HTML

        <mat-chip-list #chipList [disabled]="true">
            <mat-chip *ngFor="let chip of normalTags" [selectable]="selectable" 
            [removable]="removable"
                (removed)="removeTags(chip)">
                {{chip.tag}}
            </mat-chip>

            <input matInput #input [(ngModel)]="tagIn" [formControl]="tagCtrl2" 
            [matAutocomplete]="auto" />
        </mat-chip-list>

現在我必須在標簽組件中的 mat-chip-list 上執行 [disabled]="true"。html 以便用戶無法添加或刪除它。 我不想對此進行硬編碼，而是想使用圖表詳細信息組件復選框來控制它。

禁用匹配和輸入看起來像這樣（PIC）

它不會運行，但我已將這兩個組件的整個代碼附加到此處https://stackblitz.com/edit/angular-ivy-wwfcai 。 謝謝

Answer 1

您是否在子組件 class 中聲明了“@Input() disabled”？

在 Child.component.ts 中

@Input() disabled: any;
    ngOnInit() {
         if(disabled){
              //set properties to true/false accordingly
         }
}

在 Parent.component.html

[disabled]="this.workspace.type === WorkspaceType.user"