角度15-在使用相同组件的页面之间路由时忘记现有输入

Question

TL；DR

我想建立一个有棱角的(v15atm)应用程序，作为降临节日历。这将：

• 允许我选择特定年份(例如<url>/calendar/2021)
• 允许我在个别年份打开窗口

我已经完成了然而在我当前的版本中，如果我在2021年打开第一天，然后切换到2022年，2022年的第一天就已经打开了

我正试图弄清楚如何清除我在以前版本的组件上所做的事情的记忆，这可能意味着每次都要创建新的组件。你们中有人能帮忙吗？

---

背景

比方说，我正在Angular制作一个降临节日历，我希望它能跨越多年。

我可能有一个app-routing.module.ts，看起来像这样：

const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'calendar/:year', component: CalendarComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

和一个看起来像这样的calendar.component.ts：

@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent {
title = environment.appName;
showYear = 0;
showDays = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25];
constructor(
private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.showYear = params['year'];
this.title = environment.appName + ': ' + params['year'];
});
}
}

带有html:

<div class="window-wrap">
<div class="window-place" *ngFor="let day of showDays">
<aoc-window [year]="showYear"
[day]="day">
</aoc-window>
</div>
</div>

window.component.ts如下所示：

@Component({
selector: 'aoc-window',
templateUrl: './window.component.html',
styleUrls: ['./window.component.scss']
})
export class WindowComponent {
@Input() year: number = 0;
@Input() day: number = 0;
aocResponse?: AOCResponse | undefined;
isOpen: boolean = false;
constructor(private aocService: WindowService) {  }
open() {
this.isOpen = true;
this.getAOCResponse();
}
getAOCResponse() {
let callPath = environment.aocPath + '/' + this.year + '/' + this.day
this.aocService.getAOCAnswer(callPath)
.subscribe(aocResponse => {
this.aocResponse = aocResponse;
}, error => {
console.error(error);
this.aocResponse = { answer: 'Failed' }
});
}
}

带有html:

<div class="aoc-window">
<button id="windowClosed" *ngIf="!isOpen" (click)="open()">{{ day }}</button>
<div *ngIf="isOpen">
<div class="window-answer" *ngIf="aocResponse">{{ aocResponse.answer }}</div>
<div class="window-failure" *ngIf="!aocResponse">Loading answer...</div>
</div>
</div>

---

问题

到目前为止一切正常。我可以导航到2021，并获得该页面的答案。然而，如果我在2021年打开1-3号门，然后切换到2022年，这些门仍然打开

如何将角度分量设置为"0"；忘记"；他们知道什么？

可能有两个答案：

• 关闭所有打开的面板加载2022(即忘记一切)
• 了解2021&2022面板

我对任何一个答案都满意！

谢谢！

---

其他文件

homepage.component.html

<mat-sidenav-container class="app-main-display">
<mat-sidenav #sidenav mode="side" opened class="app-sidenav">
<mat-nav-list>
<a mat-list-item [routerLink]="'/dashboard'"> Dashboard </a>
<a mat-list-item [routerLink]="'/calendar/2021'"> 2021 </a>
<a mat-list-item [routerLink]="'/calendar/2022'"> 2022 </a>
<a mat-list-item [routerLink]="'/calendar/2023'"> 2023 (future) </a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content class="app-router-content">
<div>
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

app.module.ts

@NgModule({
declarations: [
HomepageComponent,
WindowComponent,
DashboardComponent,
CalendarComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
MaterialModule,
MatNativeDateModule
],
providers: [],
bootstrap: [HomepageComponent]
})
export class AppModule { }

Answer 1

如果我做对了，问题是当你将url更改为2022时，你的输入仍然是2021值，对吗？如果是这样，您可以将inputs()更改为"input()set"；，这样，每次更新时都可以获得新的值。所以它会是这样的：

更改

@Input() year: number = 0;
@Input() day: number = 0;

至

@Input() set year(year: number) {
this.internalYear = year;
}
private internalYear: number = 0;
@Input() set day(day: number) {
this.internalDay = day;
}
private internalDay: number = 0;

这样，当您用新的年份更新"showYear"属性时，您的输入也会更新其值。