components 相关问题

我简化了我的问题：一些项目我简化了我的问题： <div *ngIf="layout1" class="layout1"> <div class="sidebar-layout1"> some items </div> <child-component [something]="sth"></child-component> </div> <div *ngIf="!layout1" class="layout2"> <child-component [something]="sth"> <p>some content...</p> </child-component> </div> 我有一个父组件，它有可能是普通布局（layout1）和全屏布局（layout2）（在全屏模式下，子组件应该是全屏的）。问题是，当我用 *ngIf 改变布局时，子组件被销毁并生成一个新的。我想要相同的实例并且不要丢失子组件的重要信息并避免一些 api 调用。有什么方法可以实现子组件不会被破坏，或者有比 ngIf 更好的方法吗？我只需要一个子组件实例用于父组件中的不同布局。您可能已经注意到，如果您使用 *ngIf 隐藏元素，则会创建一个新组件。这是我们将尝试关注并尽量避免创建新组件的内容。为此，我们可以使用“切换器布局”并将子组件作为内容传递 <app-layout-switcher [layout1]="layout1"> <ng-container> <child-component *ngIf="sth$ | async as sth; else loading" [something]="sth" > <p>some content...</p> </child-component> <ng-template #loading> <h1>Loading...</h1> </ng-template> </ng-container> </app-layout-switcher> 我添加了一个模拟 http 调用来显示加载。在我们的app-layout-switcher组件中，我们可以根据需要在布局之间切换。我们会将 child-component 传递到模板中，以便能够在布局中重用它 <div *ngIf="layout1"> <app-layout-1> <ng-template [ngTemplateOutlet]="childComponent"></ng-template> </app-layout-1> </div> <div *ngIf="!layout1"> <app-layout-2> <ng-template [ngTemplateOutlet]="childComponent"></ng-template> </app-layout-2> </div> <ng-template #childComponent> <ng-content></ng-content> </ng-template> 现在我们可以在布局中使用模板 <header> <h1>Layout 1</h1> </header> <main> Contents in Layout 1 <div> <ng-content></ng-content> </div> </main> <footer>Layout 1 Footer</footer> 我们现在只使用组件的一个实例。为了确认这一点，我在演示中添加了一个文本字段。您会注意到切换布局时数据会保留看这个演示使用[hidden]属性代替反向逻辑，它将防止元素被破坏。 <div [hidden]="!layout1" class="layout1"> ... </div> <div [hidden]="layout1" class="layout2"> ... </div> 我 hidden 只是通过更改显示样式隐藏/显示带有 css 的 DOM 元素您可以通过几个步骤实现：使用此命令创建服务： ng generate service data-passing 在该服务中定义两个变量来保存每个组件的数据： import {Injectable} from '@angular/core'; @Injectable({ providedIn: 'root', }) export class DataPassingService { public firstComponentData; public secondComponentData; constructor() { } } 在您的组件中使用服务： import {DataPassingService} from '...'; ... constructor(public dataPassingService: DataPassingService) { } 将每个组件数据存储在相对变量中： setDate(first, second) { this.dataPassingService.firstComponentData = first; this.dataPassingService.secondComponentData = second; } 像以前一样使用*ngIf来控制组件可见性： <div *ngIf="layout1" class="layout1"> <div class="sidebar-layout1"> some items </div> <child-component [something]="dataPassingService.firstComponentData"></child-component> </div> <div *ngIf="!layout1" class="layout2"> <child-component [something]="dataPassingService.secondComponentData"> <p>some content...</p> </child-component> </div> 因为你想在两种不同的布局中显示相同/不同的细节：实现秋田商店的状态管理 https://datorama.github.io/akita/docs/store 从父组件本身的服务中获取所需的所有数据。将从服务接收到的数据更新到商店中。通过在两种布局中使用查询来订阅商店。更新用户在店内所做的最新更新

angular typescript components angular-cli directive

回答 4 投票 0

postgres 和 delphi 2010 连接到现有的本地运行服务器

我在使用 Delphi 2010 连接到现有的正在运行的 postgres 服务器时遇到问题！有什么解决办法吗？我没有正确的方法或组件？

postgresql delphi components odbc

回答 0 投票 0

将数据从 Blade View 传递到 Blade 组件

我有以下控制器，它加载一个包含组件的视图以及从数据库中获取的数据，该视图正确显示 $data，我遇到的问题是我传递的数据

php laravel components

回答 1 投票 0

如何在 REACT 中将表单（单选按钮）数据从子级传递给父级

我想将表单数据从子组件传递到父组件我知道使用名为 onSubmit 的事件处理程序很容易发送数据但是我需要这个数据传递每当 for...