0

“初始化.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);
 }

“home-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;
   }
}

“home-feed.html”

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

这是我的流程的基本实现。我最初是路由到我的 HomeFeedComponent，但是一旦我在我的初始路由上到达那里。即使 display 等于 true （我什至从组件控制台记录它）我的前端也不会呈现类“活动”，除非我添加this.ChangeDetectorRef.detectChanges();到clickyClick.

但是，当我在默认路由之后路由回该组件时，无需detectChanges.

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

提前致谢！

4

1 回答 1

0

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

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

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

于 2020-12-18T14:49:23.550 回答