鍍金池/ 問答/HTML5/ angular4如何管理導(dǎo)航?

angular4如何管理導(dǎo)航?

  1. 使用angular的路由時(shí),在頁面點(diǎn)擊了一個(gè)路由鏈接后會(huì)轉(zhuǎn)到目標(biāo)組件,而且瀏覽器上的url也是跟著變的。如果手動(dòng)在瀏覽器上修改相同鏈接,發(fā)現(xiàn)不能跳轉(zhuǎn)到目標(biāo)組件。我知道是瀏覽器去訪問服務(wù)器的url了,所以不能轉(zhuǎn)到目標(biāo)組件。那么如何讓angular阻止在瀏覽器上的跳轉(zhuǎn)?
  2. 或者說有什么方法來管理導(dǎo)航?
回答
編輯回答
大濕胸

angular針對你說的這個(gè)情況提供了解決方案了,
router里面提供了兩個(gè)接口[canActivate][1][CanDeactivate][2]

你可以根據(jù)你自己的需求,實(shí)現(xiàn)這兩個(gè)接口,并配置在router里面,這兩個(gè)接口就相當(dāng)于router的guard,在跳轉(zhuǎn)之前先調(diào)用你的處理邏輯。

這是官方的例子:

class UserToken {}
class Permissions {
  canDeactivate(user: UserToken, id: string): boolean {
    return true;
  }
}

@Injectable()
class CanDeactivateTeam implements CanDeactivate<TeamComponent> {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}

  canDeactivate(
    component: TeamComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return this.permissions.canDeactivate(this.currentUser, route.params.id);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        canDeactivate: [CanDeactivateTeam]
      }
    ])
  ],
  providers: [CanDeactivateTeam, UserToken, Permissions]
})
class AppModule {}
2017年3月22日 04:21
編輯回答
吢涼

前后端分離,分開部署,使用nginx部署angular

2018年1月26日 22:44