Angular 2 路由中断（单击）处理程序更改检测

Question

"initialize.ts"

platform.bootstrapModule(HomeModule);

"home.module.ts"

const appRoutes: Routes = [    
     { path: 'home', component: HomeFeedComponent }, 
]

@NgModule({
    bootstrap: [
        HomeAppComponent,
        HomeFeedComponent
    ],

export class HomeModule { constructor() { bootstrapComponents(UnrelatedComponent) } }

"家-app.component.ts"

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

"主页-feed.component.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;
   }
}

"主页-feed.html"

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

这是我的流程的基本实现。我最初路由到我的 HomeFeedComponent，但是一旦我到达我的初始路由。即使显示等于 true（我什至从组件控制台记录它）我的前端也不会呈现 class 'Active' 除非我将 this.ChangeDetectorRef.detectChanges(); 添加到 clickyClick.

然而，当我在默认路由后路由回此组件时，无需 detectChanges。

Question: So I'd love to know what I am doing wrong here, why do I have to manually trigger detectChanges when initially routing? Is this an Angular bug or is my logic wonky?

提前致谢！

Answer 1

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

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

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

Angular 2 路由中断（单击）处理程序更改检测

Angular 2 routing breaks (click) handler change detection

html

angular

change-detector-ref