我有一个由两个组件构成的非常简单的测试应用:
- AppComponent
- ListComponent
这两个组件具有相同的行为:在加载时,它们使用async管道从Observable中显示一系列项目。 AppComponent另外还有一个按钮和一个RouterOutlet,在单击按钮后,它会加载ListComponent。
当这段代码被编译为开发环境时,即使用ng build
命令,一切正常。但是当将相同的代码编译为生产环境时,即使用ng build --prod
命令,行为就不同了。在第二种情况下,如果我单击按钮转到ListComponent,则ListComponent的Observable在页面加载时不再发出。
以下是代码(我还有一个 Stackblitz 示例,但该问题并未发生):
ListComponent
@Component({
selector: 'app-list',
template: `
<input #searchField type="text">
<div *ngFor="let item of itemsToShow$ | async">{{item}}</div>
`,
})
export class ListComponent implements OnInit, AfterViewInit {
@ViewChild('searchField', {static: true}) searchField: ElementRef;
search$: Observable<string>;
itemsToShow$: Observable<string[]>;
ngOnInit() {}
ngAfterViewInit() {
this.search$ = merge(concat(of(''), fromEvent(this.searchField.nativeElement, 'keyup'))).pipe(
map(() => this.searchField.nativeElement.value)
);
this.itemsToShow$ = this.itemsToShow();
}
itemsToShow() {
let itemAsLocalVar: string[];
return of(ITEMS).pipe(
delay(10),
tap(items => itemAsLocalVar = items),
switchMap(() => combineLatest([this.search$])),
map(([searchFilter]) => itemAsLocalVar.filter(i => i.includes(searchFilter))),
);
}
}
AppComponent
@Component({
selector: 'app-root',
template: `
<input #searchField type="text">
<div *ngFor="let item of itemsToShow$ | async">{{item}}</div>
<router-outlet></router-outlet>
<button (click)="goToList()">List</button>
`
})
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild('searchField', {static: true}) searchField: ElementRef;
search$: Observable<string>;
itemsToShow$: Observable<string[]>;
constructor(
private router: Router,
) {}
ngOnInit() {}
ngAfterViewInit() {
this.search$ = merge(concat(
of(''),
fromEvent(this.searchField.nativeElement, 'keyup')
)).pipe(
map(() => this.searchField.nativeElement.value)
);
this.itemsToShow$ = this.itemsToShow();
}
itemsToShow() {
let itemAsLocalVar: string[];
return of(ITEMS).pipe(
delay(10),
tap(items => itemAsLocalVar = items),
switchMap(() => {
return combineLatest([this.search$]);
}),
map(([searchFilter]) => itemAsLocalVar.filter(i => i.includes(searchFilter))),
tap(i => console.log(i))
);
}
goToList() {
this.router.navigate(['list']);
}
}
非常感谢对问题出现原因的任何想法。
任何想法