如何从嵌套的同级组件Angular 2 +

Question

我需要赶上事件的帮助。我有两个嵌套的组件： 我有一些3视图的日历：日，周，月。我可以使用导航栏进行切换，如果我在“日历”中单击“天”，则可以将周视图切换为日视图。但是，如果我在日历中执行此操作，则导航栏按钮不会随之切换。

如果我理解正确，我必须在tm-navbar上捕获此事件（dayHeaderClicked）=“ viewDate = $ event.day.date; view = CalendarView.Day”。

欢迎任何帮助。

app.component.html

                    <tm-navbar 
                         (viewChange)="onViewChange($event)"
                         (viewDateChange)="onViewDateChange($event)"
                         [(viewDate)]="viewDate"
                         [(view)]="selectedView">
                    </tm-navbar>
                    <tm-calendar
                         [(view)]="selectedView"
                         [viewDate]="viewDate"
                         (viewChange)="onViewChange($event)"
                         (openEvent)="onOpenEvent($event)">
                    </tm-calendar>

app.component.ts

                Component({
                  selector: 'tm-termin-uebersicht',
                  templateUrl: './termin-uebersicht.component.html',
                  styleUrls: ['./termin-uebersicht.component.scss']
                })
                export class TerminUebersichtComponent implements OnInit {

                  @Input()
                  locale = 'de';

                  viewDate = DateUtils.getNextWeekDate();
                  selectedView = CalendarView.Week;
                  calendarEvents: CalendarEvent[] = [];
                }  
              onViewChange(event: CalendarView): void {
                this.selectedView = event;
                this.updateCalendarEvents();
              }

              onViewDateChange(date: Date): void {
                 this.terminService.viewDate = date;
                 this.terminService.updateDisabledAreas();
                 this.viewDate = date;
                 this.updateCalendarEvents();
                     }

tm-navbar.html：

                <div class="flex-grow-0 bg-secondary">
                    <a id="btnTag" class="text-primary p-3" (click)="changeView(CalendarView.Day)">
                      <fa-icon icon="calendar-plus" [class.text-success]="view === CalendarView.Day"></fa-icon> Tag
                    </a>
                    <a id="btnWoche" class="text-primary p-3" (click)="changeView(CalendarView.Week)">
                      <fa-icon icon="calendar-alt" [class.text-success]="view === CalendarView.Week"></fa-icon> Woche
                    </a>
                    <a id="btnMonat" class="text-primary p-3" (click)="changeView(CalendarView.Month)">
                      <fa-icon icon="calendar" [class.text-success]="view === CalendarView.Month"></fa-icon> Monat
                    </a>
                  </div>

tm-navbar.ts：

                @Component({
                  selector: 'tm-navbar',
                  templateUrl: './navbar.component.html',
                  styleUrls: ['./navbar.component.scss']
                })
                export class NavbarComponent implements OnInit {

                  @Input()
                  view: CalendarView = CalendarView.Week;

                  @Input()
                  viewDate: Date = new Date();

                  @Input()
                  locale = 'de';

                  @Input()
                  linkDisabled = false;

                  @Output()
                  viewDateChange: EventEmitter<Date> = new EventEmitter();

                  @Output()
                  newTermin: EventEmitter<Date | undefined> = new EventEmitter();

                  @Output()
                  viewChange: EventEmitter<CalendarView> = new EventEmitter();

                  CalendarView = CalendarView;

                  constructor() { }

                  ngOnInit() {
                  }

                  changeView(selectedView: CalendarView): void {
                    this.view = selectedView;
                    this.viewChange.emit(selectedView);
                  }
                }

tm-calendar.html：

                <div [ngSwitch]="view">
                <mwl-calendar-month-view
                *ngSwitchCase="'CalendarView.Month'"
                [viewDate]="viewDate"
                [events]="events"
                (dayClicked)="viewDate = $event.day.date; view = 'CalendarView.Day'"
                >

                <mwl-calendar-week-view
                *ngSwitchCase="'CalendarView.Week'"
                [viewDate]="viewDate"
                [events]="events"
                (dayHeaderClicked)="viewDate = $event.day.date; view = CalendarView.Day"
                >
                </mwl-calendar-week-view>
                <mwl-calendar-day-view
                *ngSwitchCase="'CalendarView.Day'"
                [viewDate]="viewDate"
                [events]="events"
                >
                </mwl-calendar-day-view>
                </div>

tm-calendar.ts

                @Component({
                  selector: 'tm-calendar',
                  templateUrl: './calendar.component.html',
                  changeDetection: ChangeDetectionStrategy.OnPush,
                  styleUrls: ['./calendar.component.scss'],
                  providers: [
                    {
                      provide: CalendarEventTitleFormatter,
                      useClass: CustomEventTitleFormatter
                    }
                  ]
                })
                exportclassCalendarComponentimplementsOnInit,OnChanges{

                @Input()
                view:CalendarView=CalendarView.Week;

                @Input()
                viewDate:Date=newDate();

                @Input()
                locale='de';

                @Output()
                openEvent:EventEmitter<CalendarEvent>=newEventEmitter();

                @Output()
                newEvent:EventEmitter<Date>=newEventEmitter();

                @Output()
                viewChange:EventEmitter<CalendarView>=newEventEmitter();
                }