Question

为什么下面的函数返回outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']而不是outlet.activatedRouteData['animation']？（大概是我们关心的价值）？

src/app/app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot([
      { path: '', pathMatch: 'full', redirectTo: '/enter-leave' },
      { path: 'open-close', component: OpenClosePageComponent },
      { path: 'status', component: StatusSliderPageComponent },
      { path: 'toggle', component: ToggleAnimationsPageComponent },
      { path: 'heroes', component: HeroListPageComponent, data: {animation: 'FilterPage'} },
      { path: 'hero-groups', component: HeroListGroupPageComponent },
      { path: 'enter-leave', component: HeroListEnterLeavePageComponent },
      { path: 'auto', component: HeroListAutoCalcPageComponent },
      { path: 'home', component: HomeComponent, data: {animation: 'HomePage'} },
      { path: 'about', component: AboutComponent, data: {animation: 'AboutPage'} },

    ])
  ],

src/app/app.component.html

<div [@routeAnimations]="prepareRoute(outlet)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

src/app/app.component.ts

prepareRoute(outlet: RouterOutlet) {
  return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}

Answer 1

这是为了避免发生错误。为了获得正确的回报，必须定义所有值。否则，将返回错误的值（未定义|| null），但重要的是，不会导致导致不良行为的错误。

return outlet // if outlet is defined this will be fine.

在下面，如果插座是虚假的（未定义|| null），它将仅返回插座，这将停止访问activatedRouteData，这将导致TypeError错误。在浏览器控制台中可以看到。

return outlet && outlet.activatedRouteData

要继续，只要outlet为真（在这种情况下为值），它将返回outlet.activatedRouteData。依此类推，如果outlet.activatedRouteData是真实的，则将返回outlet.activatedRouteData['animation']，否则仅返回outlet.activatedRouteData。

为求总结，这是检查左操作数（值）是否为真值，以便返回右操作数（值）。不会导致尝试访问未定义属性的TypeError错误。

function example()
{
    return null && 3; // will return null. because left hand if falsy.
}
console.log(example());

function exampleTwo()
{
    return 3 && 6; // will return 6 (right hand) , because left value is truthy
}
console.log(exampleTwo());

没有上述逻辑，通过尝试访问未定义的属性，您可能会看到与以下类似的TypeError发生。

function TypeError()
{
    let example;
    return example.test;
}

console.log(TypeError());

函数为什么返回`outlet && outlet.activatedRouteData && outlet.activatedRouteData ['animation']`？

1 个答案: