角度2路由中断(点击)处理程序更改检测

Question

"初始化.ts"；

platform.bootstrapModule(HomeModule);

"home.module.ts"；

const appRoutes: Routes = [    
{ path: 'home', component: HomeFeedComponent }, 
]
@NgModule({
bootstrap: [
HomeAppComponent,
HomeFeedComponent
],
export class HomeModule { constructor() { bootstrapComponents(UnrelatedComponent) } }

"home-app.component.ts"；

export class HomeAppComponent {
public defaultUrl: string;
this.defaultUrl = '/' + 'home';
this.router.navigateByUrl(this.defaultUrl);
}

"家庭馈送组件.ts"；

@Component({
selector: 'home-feed',
template: '../templates/home-feed.html'
})
export class HomeFeedComponent implements NgOnInit {
public display = false;
constructor() {}
public ngOnInit(): void {}
public clickyClick(): void { 
this.display = true;
}
}

"主页提要.html"；

<li class="message-tab"><a (click)="clickyClick()"
[ngClass]="{ 'active': display }">Message</a>
</li>

以下是我的流程的基本实现。我最初是在路由到我的HomeFeedComponent，但是一旦我按照我的初始路由到达那里。即使display等于true(我甚至从组件控制台记录这一点(，除非我将this.ChangeDetectorRef.detectChanges();添加到clickyClick，否则我的前端不会呈现类"Active"。

然而，当我在默认路由之后路由回该组件时，这就可以在不需要detectChanges的情况下工作。

问题：所以我很想知道我做错了什么，为什么在最初路由时必须手动触发detectChanges？这是一个Angular错误还是我的逻辑不稳定？

提前感谢！

Answer 1

看起来这个修复相对简单！由于某种原因，当我们router.navigate时，我们失去了变化检测。以下是将组件放回Angular查找更改的区域的方法。

this.zone.run(() => {
this.router.navigate(this.defaultUrl);
});

https://github.com/angular/angular/issues/23697