标签: angular4-router

如何说服Angular 4路由器在我的应用程序中禁用直接浏览器导航？

我已经查看了路由器钩子CanActivate并CanDeactivate实现了它们,但CanDeactivate在使用直接浏览器导航时根本不会触发.

我可以CanActivate用来阻止网址,但只有在应用程序重新启动后,这需要时间和浏览器窗口中的不需要的更改.

我希望能够在应用重新启动之前捕获直接浏览器导航.

如果这有帮助:我想完全禁止直接浏览器导航,所以我不需要允许某些网址并禁用其他网址的解决方案.

这是我的路由器定义:

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent, canActivate: [RouteGuardService] },
  { path: 'users', component: UsersMainComponent, canActivate: [RouteGuardService] },
  { path: 'vendors', component: VendorMainComponent, canActivate: [RouteGuardService] },
  { path: 'invoices', component: InvoicesMainComponent, canActivate: [RouteGuardService] },
  { path: 'offers' , component: EsdMainComponent, canActivate: [RouteGuardService] },
  { path: 'settings' , component: SettingsMainComponent, canActivate: [RouteGuardService] },
  // Callback …

该页面当前是http://localhost:4200/foo.

案例 1：如果我按下浏览器的重新加载按钮或在浏览器中输入相同的 url，页面将重定向到http://localhost:4200（根路径）。

我希望页面保持在同一个 url ( http://localhost:4200/foo) 中。

情况 2：如果我输入http://localhost:4200/foo（相同的 url）页面重定向到http://localhost:4200（根路径）。

我还希望页面保留在我输入的相同 url ( http://localhost:4200/foo) 中。

否则，如果页面是http://localhost:4200并且我键入http://localhost:4200/foo，则它工作正常。我可以正常通过 url 路径导航。问题仅在我走相同的道路时。

我在 app.module.ts 中的根路径是：

const rootRouting: ModuleWithProviders = RouterModule.forRoot([
    {
        path: 'foo',
        loadChildren: './foo/foo.module#FooModule'
    },
    {
        path: '',
        loadChildren: './bar/bar.module#BarModule'
    },
], { });

我在 foo.module.ts 中的路径是：

    const fooRouting: ModuleWithProviders = RouterModule.forChild([
      {
        path: 'foo',
        component: FooComponent
      }
    ]);

OBS：这个问题Angular 5 - 在浏览器刷新时将页面重定向到主页与我的完全相反。现在，我不知道这种情况下的 Angular 默认行为是什么。 …

我已经检查了相关问题router.navigate 更改了 URL，但没有呈现组件，但相同的场景导致相同的结果。

我的路线模块中有一条路线：

        {
            path: "competition/details",
            loadChildren: "../pages/competitions/competitions-details/competitions-details.module#CompetitionsDetailsModule"
        }

该页面（“竞争详细信息”）呈现我的元素：

<standings-regular></standings-regular>

然后在组件中我检查 2 个可选参数：

    this.competitionId = this.activatedRoute.snapshot.params.competition;
    this.condition = this.activatedRoute.snapshot.params.condition;

最后我使用这些参数“竞争”和“条件”来构建一个数组。到目前为止，如果我直接在浏览器中使用 URL，一切正常：

例如： http://localhost:4200/competition/details;competition=219;condition=home

现在，这基本上代表了给定比赛的同一张桌子的不同视图，对于一点背景。

http://localhost:4200/competition/details;competition=219;condition=home 将呈现第 219 场比赛中每支球队只有主场比赛的积分榜。

http://localhost:4200/competition/details;competition=219 创建包含来自比赛 219 的所有匹配项的表。

所以，我希望在同一个表中有一个链接来导航到新的 URL，但是当我尝试这样做时，它只会更改浏览器中的 URL，但不会更改视图。

这是我尝试导航的方式：

        <ul class="dropdown-menu btn-primary dropdown-menu-right">
            <li>
                <a md-ripple [routerLink]="['/competition/details', {competition: '219'}]">Completa</a>
            </li>
            <li>
                <a md-ripple [routerLink]="['/competition/details', {competition: '219', condition: 'home'}]">Home Only</a>
            </li>
        </ul>

我还尝试将 routerLink 替换为 (click)="" 事件，该事件触发组件中的导航方法，但结果相同，更改浏览器中的 URL，但不执行任何操作。

我尝试了 router.navigate() 和 router.navigateByUrl()

有什么想法吗？

我正在开发一个Angular 4应用程序.我打算使用HashLocationStrategy但不起作用(#没有出现在URL中).以下是我的应用程序路由模块:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardPage } from './dashboard-page/component';
import { AccountPage } from './acct-page/component';

const appRoutes: Routes = [
    { path: 'dashboard', component: DashboardPage },
    { path: 'accounts/:number', component: AccountPage},
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, { enableTracing: false, useHash: true })],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule { }

以下是我的app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; …

我想要做的是，我想同时加载home component和sidebar component。

const appRoutes: Routes = [
  {
    path: '', component: HomeComponent, children: [{
      path: 'sidebar', component: SidebarComponent, children: [
        { path: 'about', component: AboutComponent },
        { path: 'clients', component: ClientsComponent },
        { path: 'services', component: ServicesComponent },
        { path: 'contact', component: ContactComponent },
        { path: 'datatable', component: DataComponent }
      ]
    }]
  }

我正在Angular 4中编写一个Authguard,以防止在没有登录的情况下访问路由.但是,我收到了这个错误.以下是Authgaurd和Routing in App模块中的代码.请帮助解决问题.

// Authgaurd代码

import { ActivatedRouteSnapshot, CanActivate, Route, Router, 
RouterStateSnapshot } from '@angular/router';
import { Store } from '';
import { Observable } from 'rxjs/Observable';
import { map, take } from 'rxjs/operators';
import { Observer } from 'rxjs';
import { Globals } from '../../app.global';
import { CRMStorageService } from '../services/storage.service';
import 'rxjs/add/operator/take';

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private router: Router,private storageService: StorageService) { 
 }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
Observable<boolean> {
return this.storageService.getItem(Globals._CURRENT_USER_KEY).take(1).map 
(token => { …

请解释useHash: true角度2路线方法中的方法。

我的问题：

1. 我们使用它的目的是什么。

2. 为什么值是“真”为什么不是“假”？

3. 如果值为假，会发生什么？

RouterModule.forRoot([ ABOUT_ROUTE ], { useHash: true })

我已经构建了一个包括 Angluar5 的 Springboot 应用程序。我有一个 gradle 构建脚本，它将角度文件加载到我的 springboot 项目中。这些文件位于我的 springboot 项目的资源/静态下。当我启动我的应用程序时，angular 的路由不再起作用，我得到

错误：无法匹配任何路由。URL 段：'访问'

我的项目结构：

我使用以下语句部署了我的 angular 应用程序：

ng build --deploy-url=BeatAcknowledgeTest --op=../backend/src/main/resources/static

这将使我的静态文件可以通过以下链接访问：

www.mySite.com/BeatAcknowledgeTest/...

如果我输入

www.mySite.com/BeatAcknowledgeTest/access

页面呈现，一切都很好，但是当我在另一个组件中时，例如

www.mySite.com/BeatAcknowledgeTest/home

然后我点击一个按钮，将我路由到

www.mySite.com/BeatAcknowledgeTest/access

我收到一个错误，我的应用程序没有重定向。

有什么建议？

我已按照官方migating_documentation中提到的相同步骤进行操作我遵循了Angular

不幸的是，当我将代码从 Angular 2 迁移到 Angular 4.4 时，我遇到了一个问题。该问题可能与@angular/router有关。

然而，代码似乎工作正常，但我无法进行构建。任何建议将不胜感激。

终端中显示错误：

ERROR in [at-loader] src/app/app.component.ts:60:16 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'

ERROR in [at-loader] src/app/app.component.ts:60:39 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'.

ERROR in [at-loader] src/app/app.component.ts:60:68 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'.

包.json

ERROR in [at-loader] src/app/app.component.ts:60:16 …

我已经NVD3在Angular 4中实现了Charts.在回调函数内部写了一个Click事件,点击图表我试图导航到另一个组件但是我无法导航.

代码:

import { Router} from '@angular/router';
export class MyNewComponentComponent implements OnInit {
constructor(public router: Router)
  {

  }
 this.options = {
    chart: {
      type: 'discreteBarChart',
      height: 450,
      margin : {
        top: 20,
        right: 20,
        bottom: 50,
        left: 55
      },

      x: function(d){return d.label;},
      y: function(d){return d.value;},
      showValues: true,
      valueFormat: function(d){
        return d3.format(',.4f')(d);
      },
      duration: 500,
      xAxis: {
        axisLabel: 'X Axis'
      },
      yAxis: {
        axisLabel: 'Y Axis',
        axisLabelDistance: -10
      },
      callback: function(chart){ 
        chart.discretebar.dispatch.on('elementClick', (angularEvent,e) => {
             console.log("Inside click"); 
                            this.router.navigate(["/app-new-component2"]); …