小编Kur*_*ton的帖子

我正在尝试使用 ngFor 循环一些项目，并为每个项目创建一个 mat-expansion-panel。

我想将每个项目的逻辑封装到一个项目组件中：

    <item></item>

初步尝试：

<mat-accordion>
  <div *ngFor="let item of items" >
    <item [item]="item"></item>
  </div>
</mat-accordion>

其中项目模板是：

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        Header Content
      </mat-expansion-panel-header>

      <div>
         Expandable content
      </div>
    </mat-expansion-panel>

这种方法的问题在于，我的组件在<mat-accordion>和之间有一个额外的 html 元素<mat-expansion-panel>，这会弄乱手风琴的 css。

有没有办法让我的组件可以提供标题和内容？

    <mat-accordion>
      <div *ngFor="let item of items" >
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <!-- put item component header here->
            </mat-expansion-panel-header>

          <div>
            <!-- put item component content here->
          </div>
        </mat-expansion-panel>
      </div>
    </mat-accordion>

我已经阅读了 ng-content，但我认为这与我想要的相反，我不想将自定义内容推送到我的组件中，我想从我的组件中提取元素并将它们呈现在父级中。

我确实意识到我可以创建 2 个组件，item-header 和 item-content。但是，我真的很想将该登录名保留在一个组件中。

我正在尝试以天为单位计算两个日期之间的差异。但是，当两个日期在不同的月份时，上个月的日期将被丢弃。

例如，如果开始日期是 3 月 31 日，结束日期是 4 月 1 日，则差值为 0。

HTML：

<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
    </ngb-datepicker>

    <ng-template #t let-date let-focused="focused">
      <span class="custom-day"
            [class.focused]="focused"
            [class.range]="isRange(date)"
            [class.faded]="isHovered(date) || isInside(date)"
            (mouseenter)="hoveredDate = date"
            (mouseleave)="hoveredDate = null">
        {{ date.day }}
      </span>
    </ng-template>

    <p>Number of selected dates: {{DiffDate}}</p>


    <pre>From: {{ fromDate | json }} </pre>
    <pre>To: {{ toDate | json }} </pre> 

排版文件：

    import {Component} from '@angular/core';
    import {NgbDate, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

    @Component({
      selector: 'ngbd-datepicker-range',
      templateUrl: './datepicker-range.html',
      styles: [`
        .custom-day {
          text-align: …

我有 2 个组件，一个父组件和一个子组件。相同的父组件应该加载到 2 个不同的路由上，假设路由 1 和路由 2。父组件检查使用了哪个路由并设置一个关于 (isRoute1) 的布尔值。子组件获取此布尔值作为输入并渲染 HTML。请参阅下面的框架代码。

首先假设我在浏览器中打开route1。我可以在控制台中看到“Parent init”和“Child init”文本，并且子组件呈现“ROUTE1”。一切都按预期进行。接下来，我在浏览器中导航到路线 2（直接从路线 1），并且得到了一些意想不到的结果。在控制台中，没有显示任何内容（因此 OnInits 没有触发），但是子进程呈现了“ROUTE2”。为什么 Angular 没有触发 OnInit() 函数？我怎样才能做到这一点？我认为在路线更改时，父组件将重新加载，因此子组件也会重新加载。

// Parent component's TS
isRoute1: boolean;
ngOnInit(): void {
console.log('Parent init')
this.router$.pipe(debounceTime(1), untilDestroyed(this)).subscribe(route => {
  this.isRoute1 = route.params.id === 'route1';
});}

// Parent component's HTML
<child-component [isRoute1]="isRoute1"></child-component>


// Child component's TS
@Input()
isRoute1: boolean;

ngOnInit(): void {
  console.log('Child init')
}

// Child component's HTML
<div *ngIf="isRoute1; else route2"> ROUTE1 </div>
<div #route2> ROUTE2 </div>