angular – 嵌套组件中的链接转换

卡片头部件有一个切换按钮,用于调度卡片打开/关闭的动作.

然后,我需要能够通过卡组件将额外的按钮从父组件传递到卡片头组件中

我通过在每个级别添加选择器来解决它.

首先,我创建了一个通用的card-header组件,允许我使用一段代码来处理切换卡内容,方法是将操作分派给NgRx商店,该商店包含一系列隐藏的卡片(使用提供的名称输入属性).

卡片头组件订阅商店,并在切换状态改变时向父组件发出事件

@Component({
  selector: 'po-card-header',template: `
    <div class="card-header">

      <span class="text-uppercase">{{ header }}</span>

      <div class="header-controls">
        <ng-content select=[card-header-option]></ng-content>
        <ng-content select=[header-option]></ng-content>

        <span class="header-action" (click)="onTogglePanel()">
         <i class="fa" [ngClass]="{ 'fa-caret-up': !collapsed,'fa-caret-down': collapsed}"></i>
        </span>

      </div>

    </div>
  `
})
export class CardHeaderComponent implements OnInit,OnDestroy {
  ...
  @Input() name: string;
  @Output() togglePanel = new EventEmitter<boolean>();

  collapsed$: Observable<boolean>;
  collapsedSub: Subscription;

  constructor(private store: Store<State>) {
    this.collapsed$= this.store.select(state => getPanelCollapsed(state,this.name);
  }

  ngOnInit(): void {
    this.collapsedSub = this.collapsed$.subscribe(collapsed => {
      this.collapsed = collapsed;
      this.togglePanel.emit(collapsed);
    });
  }

  .... unsubscribe on destroy.
}

请注意,标头有2 ng-content部分.

标题选项选择器用于我明确使用此组件时要添加的任何其他图标,例如

<div class="card">

  <po-card-header>
    ...
    <span header-option class="fa fa-whatever" (click)="doSomething()"></span>
  </po-card-header>

  ...

</div>

我的新图标将与标题中的默认切换图标一起显示.

第二个card-header-option选择器用于根组件,它使用卡组件,而不是卡头组件,但仍希望将额外的图标传递到标头中.

@Component({
  selector: 'po-card',template: `

    <div class="card">
      <po-card-header>
        ...
        <ng-content select="[card-header-option] header-option></ng-content>
      </po-card-header>

      <div class="card-block">
        <ng-content select="[card-body]"></ng-content>
      </div>

    </div>
  `
})
...

[card-header-option]选择器将选择具有该属性的任何元素,然后使用header-option属性将它们传递给card-header组件

我卡片组件的最终用法如下所示.

<div>
   Some component that uses the card
   <po-card 
     header="Some text to go in the card header" 
     name="a-unique-name-for-the-card">

     <span card-header-option class='fa fa-blah header-action'></span>

     <div card-body>
       Some content that gets put inside the [card-body] selector on the card component.
     </div>

   </po-card>
</div>

最后的结果是我可以使用我的自定义卡组件,并获得卡头组件提供的切换功能的好处,但也提供我自己的自定义操作,这也将在标题中呈现

希望你觉得这很有帮助:-)