使用 Angular 11，我試圖構建類似于 Google 管理控制臺用于編輯表單不同部分的內容。我稱之為行內編輯。我有基本的功能，但我試圖弄清楚如何一次只打開一個“編輯器”。如果我在一個面板中編輯并單擊另一個面板，我希望當前編輯器關閉而另一個打開。我不想要任何快速和骯臟的東西......我更喜歡一個能讓我能夠管理每個編輯器的“狀態”的解決方案。這是我的作業代碼：
示例堆疊閃電戰
我正在努力實作的任何例子？
uj5u.com熱心網友回復：
簡單版本： 向您的行內編輯器添加一個 id。然后創建一個服務并讓它管理一個 BehaviourBubject，您可以在其中保存當前活動 id 的 id。
在 inline-editor.component.ts 而不是呼叫this.editing = truecall serviceObject.editing.next(editorId);。同樣在 ngOnInit 訂閱主題并相應地更改editing：serviceObject.editing.subscribe(id => editing = (id === this.id));
除了BehaviourBubject<number>你還可以做 BehaviourBubject<boolean[]> 并保存所有編輯器的編輯。
復雜版本：使用ngrx 存盤
uj5u.com熱心網友回復：
通常，最簡單的解決方案在這種情況下效果最好。你說“在嵌套組件中管理狀態”這意味著有一個父級和子級。由于缺少使用我自己的示例在問題中提供的代碼。換句話說，使用 Master => Detail 模式和輸入輸出。
主組件GeneralContainerComponent：
@Component({
selector: 'odm-general-container',
templateUrl: './general-container.component.html',
styleUrls: ['./general-container.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class GeneralContainerComponent implements OnInit {
availableEditors$: Observable<{ //...some properties; expanded: boolean; }[]>
constructor(private _sb: AccountSandboxService) {
// the account sandbox service handles getting a reference to available editors
this.availableEditors$ = _sb.availableEditors$;
}
onEditorScreenClicked(event: number): void {
// now just dispatch an action to your store or state service
// that will handle the update of the available editors.
// So this means change all other editors expanded property to false
// and the one that matches this id to true
this._sb.expandEditorById(event);
}
}
主組件GeneralContainerComponent模板：
<ng-container *ngIf="availableEditors$ | async as editors">
<ng-contianer *ngFor="let editor of editors">
<odm-editor
[editor]="editor"
(editorClicked)="onEditorScreenClicked($event)">
</odm-editor>
</ng-container>
</ng-container>
細節組件EditorComponent ：
@Component({
selector: 'odm-editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class EditorComponent {
@Input() editor: { //...some properties; expanded: boolean; };
@Output() editorClicked = new EventEmitter<number>();
// the id of the editor clicked could come from the template or from some property
onEditorClicked(event: number): void
{
this.editorClicked.emit(event);
}
}
詳圖組件EditorComponent模板：
<ng-template *ngIf="editor?.expanded; else collapsedEditor">
// display expanded editor
</ng-container>
<ng-template #collapsedEditor>
... html for collapsed editor
</ng-template>
此時，您的應用程式已連接到回應對來自服務的 availableEditors$ observable 的更改。因此，如果您不使用 NGXS 或 NGRX，您必須自己更新陣列，然后再次發出整個陣列，以便 Angular 可以回應更改并為您的所有編輯器運行 changeDetection 以查看哪個現在已打開。
@Injectable()
export class AccountSandboxService {
availableEditorsSub: BehaviorSubject<{//...some properties; expanded: boolean;}[]>
availableEditors$ = this.availableEditorsSub.asObservable();
expandEditorById(editorId: number): void {
// I think data on BehaviorSubject gives you access to raw data
const updatedEditors = availableEditorSub.data.map(editor => {
if(editor.id === editorId){
editor.expanded = true;
}
else{
editor.exapnded = false;
}
return editor;
})
this.availableEditorsSub.next(updatedEditors);
}
}
Does this make sense? I haven't tested the code but I'm hoping this will give you an idea of how you can approach this problem.
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/324642.html