directive 相关问题

许多编程语言和框架使用的“命令”概念。将此标记与语言和/或框架一起使用以指示上下文。 C / C ++预处理器是一种严重依赖指令的语言。他们称之为“pragma”。

我简化了我的问题：一些项目我简化了我的问题： <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

如何使用打字稿对 DOM 元素使用自定义指令

我在我的角度项目中创建了一个自定义指令。我想将它用于打字稿中的 DOM 元素。如果可能的话该怎么做？谢谢你！我在搜索中没有找到任何有用的东西

angular typescript dom directive

回答 0 投票 0

Angular 2+ 指令 - 如何从相同或嵌套模板中的子指令获取 nativeElement

我正在尝试创建一个指令来使用 Angular 2+ 管理 ARIA Web 可访问的选项卡事件，但我遇到了 Angular 指令的问题。我想要分层指令，所以我可以指定...

javascript angular directive angular2-directives

回答 0 投票 0

自定义指令可以使用Angular Material设置输入的占位符吗？

考虑一下我的html。在我的自定义指令中，我想设置... ...