主页 / user-12716922

Fred2020's questions

Martin Hope
Fred2020
Asked: 2024-08-26 16:06:43 +0800 CST
  • 6

我首先有一个看起来像这样的父/子组件

父母

<child-comp>
  <div firstContent>This is my first content</div>
  <div secondContent>This is my second content</div>
</child-comp>

孩子

<div redColourDirective> 
  <div>This is the template with directive applied</div>
  <ng-content select="[firstContent]"></ng-content>
  <ng-content select="[secondContent]"></ng-content>
</div>

...然后我希望指令redColourDirective是有条件的，所以模板变成了这样（主要是因为我不能有条件指令）

<ng-container *ngTemplateOutlet="withDirective() ? tmp1 : tmp2"> </ng-container>
<ng-template #tmp1>
  <div redColourDirective>
    <div>This is the template with directive applied</div>
    <ng-content select="[firstContent]"></ng-content>
    <ng-content select="[secondContent]"></ng-content>
  </div>
</ng-template>
<ng-template #tmp2>
  <div>
    <div>This is the template WITHOUT directive applied</div>
    <ng-content select="[firstContent]"></ng-content>
    <ng-content select="[secondContent]"></ng-content>
  </div>
</ng-template>

...其中withDirective()是作为输入的信号。现在，当 withDirective 从父组件设置为 true 时，firstContent、secondContent 会投射到子组件中，但当 withDirective 设置为 false 时则不会。我在这里做错了什么？

//works, ng-content visible
<child-comp [withDirective]="true">
  <div firstContent>This is my first content</div>
  <div secondContent>This is my second content</div>
</child-comp>

//fails, no ng-content visible
<child-comp [withDirective]="false">
  <div firstContent>This is my first content</div>
  <div secondContent>This is my second content</div>
</child-comp>

我尝试过的方法： Stackblitz 演示

angular
Martin Hope
Fred2020
Asked: 2024-08-22 15:26:42 +0800 CST
  • 8

我使用 takeUntilDestroyed 来管理我的订阅并避免内存泄漏。在注入上下文中，变量声明，我将得到类似这样的内容

mySubject1$ = new BehaviourSubject<void>(void 0);
myData1$ = mySubject1$.pipe(takeUntilDestroyed(), switchMap(() => myService.getData1()));
mySubject2$ = new BehaviourSubject<void>(void 0);
myData2$ = mySubject2$.pipe(takeUntilDestroyed(), switchMap(() => myService.getData2()));

在我的构造函数中我想组合这些，我需要再次使用 takeUntilDestroyed() 吗？

constructor(){
combineLatest([myData1$, myData2$]).pipe(takeUntilDestroyed())...
}
angular
Martin Hope
Fred2020
Asked: 2024-08-20 22:01:19 +0800 CST
  • 6

我在 Angular 中有两个组件，一个父组件和一个子组件。我希望父组件能够

  1. 将表示可点击对象的对象数组传递给子对象
  2. 让子组件根据可点击事物数组输入动态创建输出
  3. 如果输入数组中的任何项目被点击，则引发事件。

大致形状如下：

interface ClickableThing
{
  name:string;
  eventName:string
}

例子

//clickableThings definition
[{
  name:"delete";
  eventName:"deleteEvent"
},
{
  name:"save";
  eventName:"saveEvent"
}]

<child-component [clickableThings]="clickableThings" 
(deleteEvent)="handleDeleteEvent()" 
(saveEvent)="handleSaveEvent())">

子组件必须根据输入 clickableThings 动态创建输出。这可能吗？

我尝试过

我这里有一个更基本的方法StackBlitz 演示

angular